title: Change label to textbox on hyperclick click - mvc
body: <p>I want to change a label into a textbox when the user clicks on the EDIT link. I am doing the same thing that is discussed in <a href="https://stackoverflow.com/questions/16792502/change-label-to-textbox-on-edit-hyperlink-click">this post</a>, only difference is that I am using mvc razor syntax <code>DisplayFor</code> instead of using <code>&lt;label class="text-info"&gt;Saghir&lt;/label&gt;</code>.<br>
  I am not getting the desired result, please tell me where I am going wrong.</p>
  
  <p>HTML:</p>
  
  <pre><code>@Html.DisplayFor(m =&gt; m.FirstName, new { @id = "#attribute", @class = "text-info" })
  &lt;a href="#" id="edit"&gt;Edit&lt;/a&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>&lt;script&gt;
  $('#edit').click(function () {
      var text = $('.text-info').text();
      var input = $('&lt;input id="attribute" type="text" value="' + text + '" /&gt;')
      $('.text-info').text('').append(input);
      input.select();
  
      input.blur(function () {
          var text = $('#attribute').val();
          $('#attribute').parent().text(text);
          $('#attribute').remove();
      });
  });
  &lt;/script&gt;
  </code></pre>