There is a form with fields for firstname, lastname, email, country, along with edit icon and submit/cancel buttons.
When the user clicks on the edit icon in the top right corner, all values will be displayed in textboxes and the country will be shown in a select dropdown.
I have attempted some code but I am encountering issues where all values are being displayed in a single field and appearing multiple times. Can anyone assist me with this?
$('#edit').click(function() {
var text = $('.text-info').text();
var input = $('<input id="attribute" type="text" value="' + text + '" />')
$('.text-info').text('').append(input);
input.select();
$('.btn').show();
$('#edit').hide();
});.width-400{width: 400px;margin: 0 auto;padding: 20px;}
.border{border:1px solid #000;}
input{margin-bottom: 10px; width: 100%;}
.btn{display:flex;margin-top: 10px;display: none;}
.font-icon{text-align: right;}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="border width-400">
<div class="font-icon"><a class="edit" href="#" id="edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a></div>
<form method="post" action="update.php">
<div class="form-group">
<label for="fname" class="control-label">Firstname:</label><spa class="text-info">Narendra</span>
</div>
<div class="form-group">
<label for="lname" class="control-label">Lastname:</label><span class="text-info">verma</span>
</div>
<div class="form-group">
<label for="email" class="control-label">Email:</label><span class="text-info"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b7a79785b7c767a727735787476">[email protected]</a></span>
</div>
<select>
<option value="">Choose country</option>
<option>India</option>
<option>USA</option>
<option>UK</option>
</select>
<div class="btn">
<input type="submit" name="submit" value="save">
<input type="submit" name="submit" value="cancel">
</div>
</form>
</div>