title: Convert span tag to textbox with value inside it
body: <p>I am going to make the editing the fields. When user click on edit i want information to converted into textbox with the value that was previously but i am getting problem. Below codes are what i have tried. It gives HTML tags instead of displaying the textbox. How can i achieve this. Thank you.</p>
  
  <h2>Jquery</h2>
  
  <pre><code>  $(".edit").on('click',function(){
      var name = $("#name").text();
      var city = $("#city").text();
      var mob = $("#mob").text();
      var x = '&lt;input type="text" value="' + name + '"&gt;';
     $("#name").text(x);
     $("#city").text("&lt;input type='text' value='" + city + "'&gt;");
     $("#mob").text("&lt;input type='text' value='" + mob + "'&gt;");
  });
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code> &lt;li class="list-group-item"&gt; &lt;b&gt;Name:&lt;/b&gt; &lt;span class="inf" id="name"&gt;Some name&lt;/span&gt; &lt;span class="label label-info edit"&gt;Edit&lt;/span&gt; &lt;/li&gt;
      &lt;li class="list-group-item"&gt; &lt;b&gt;Current City:&lt;/b&gt; &lt;span class="inf" id="city"&gt; City name&lt;/span&gt;  &lt;/li&gt;
      &lt;li class="list-group-item"&gt; &lt;b&gt;Mobile Number:&lt;/b&gt; &lt;span class="inf" id="mob"&gt; mobile number &lt;/span&gt; &lt;/li&gt;
  </code></pre>