Q:

Hide label in button click in MVC5 JQuery

I have a list of label controls.  On edit click I want to hide label and show the text box.  My labels got ID on runtime.  
Here is my view -- 
<script>

  $(document).ready(function () {
    $('#Edit').click(function () {
      hide label and show text control
    });

  });

</script>

<table>
  @for (var i = 0; i < Model. LogData. Count; i++)
  {
    <tr>
      <td>
        @Html. DisplayFor(m => m.LogData[i].BeginMiles)
      </td>
      <td>
        @Html. DisplayFor(m => m.LogData[i].EndMiles)
        @Html. TextBoxFor(m => m.LogData[i].EndMiles, new { @class   = "edit-input" })
      </td>
    </tr>
  }
</table>

<div class="col-xs-12" align="center">
  <input class="btn btn-default" type="button" id="exit" value="Exit">
  <input class="btn btn-default" type="button" name="Edit" value="Edit" id="Edit"  >

Please help me to perform this function.  

A:

I have used php to generate 'div's and a jQuery script for the function. Which has been organized for re-use. I think it may help 
<div class="main">
<? php for($i=1;$i<=5;$i++) {
  $html = "<div class='sections'><label class='labels'>label - $i </label></ br>";
  $html .= "<input type='text' class='textbox'></br>";
  $html .= "<button class='edit'>edit</button></br></div>";
  echo $html;
}
 ? >
</div>
<script type="text/javascript">
 (function($, window, document, undefined){
  var
    constants = {
      main : '.main',
      sections : '.sections',
      textbox : '.textbox',
      edit : '.edit',
      labels : '.labels'
    },
    properties = {
      mainDiv : null,
      sectionDiv : null,
      edit : null,
      textbox : null,
      labels : null,
    },
    methods = {

      init: function() {
          properties.mainDiv = $(constants.main);
          properties.sectionDiv = properties.mainDiv.find($(constants.sections));
          properties.edit = properties.sectionDiv.find($(constants.edit));
          properties.textbox = properties.sectionDiv.find($(constants.textbox));
          properties.labels = properties.sectionDiv.find($(constants.labels));
          properties.textbox.css({
                   display: 'none'
                 });
          properties.edit.click(methods.run);

    },
    run : function (event){
      var $this = $(this);
      $this.parent().find(properties.labels).toggle();
      $this.parent().find(properties.textbox).toggle();
    }
  };
 $(document).ready(methods.init);
 })(jQuery, window, document);
</script>

