JSFiddle - React, Tailwind, and code Playground

HTML

<li class="list-group-item"> <b>Name:</b> <br/><span class="inf" id="name"><?php echo $uinfo->name; ?></span>  </li>
<li class="list-group-item"> <b>Current City:</b><br/> <span class="inf" id="city"><?php echo $uinfo->current_city; ?></span>  </li>
<li class="list-group-item"> <b>Mobile Number:</b><br/> <span class="inf" id="mob"><?php echo $uinfo->m_number; ?></span> </li><br/>
<span class="label label-info edit">Edit</span>

JavaScript

$(".edit").on('click',function(){
    var name = $("#name").text();
    var city = $("#city").text();
    var mob = $("#mob").text();
    var x = '<input type="text" value="' + name + '">';
   $("#name").html(x);
   $("#city").html("<input type='text' value='" + city + "'>");
   $("#mob").html("<input type='text' value='" + mob + "'>");
});