title: On textbox change change label value to HTML (array)
body: <p>I have a array of textbox and labels which are toggled in a html table, say the label vl be visible on first and then on the row click the text box are visible , but the problem is on that row if i change the text box value the label value should also change but hear in my case am not able to do it. </p>
  
  <p><a href="http://jsfiddle.net/vmj5h2a8/10/" rel="nofollow">JS Fiddle demo</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table border="1" cellspacing="1" width="100%" id="table1"&gt;
      &lt;tr&gt;
          &lt;th&gt;Column1&lt;/th&gt;
          &lt;th&gt;Column2&lt;/th&gt;
          &lt;th&gt;Column3&lt;/th&gt;
          &lt;th&gt;Column4&lt;/th&gt;
          &lt;th&gt;Column5&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;label&gt;data1&lt;/label&gt;
              &lt;input type="text" value="data1" /&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;label&gt;data2&lt;/label&gt;
              &lt;input type="text" value="data2" /&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;label&gt;data3&lt;/label&gt;
              &lt;input type="text"  value="data3"/&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;label&gt;data4&lt;/label&gt;
              &lt;input type="text" value="data4"/&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;label&gt;data5&lt;/label&gt;
              &lt;input type="text" value="data5"/&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;label&gt;data6&lt;/label&gt;
              &lt;input type="text" value="data6" /&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;label&gt;data7&lt;/label&gt;
              &lt;input type="text"  value="data7"/&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;label&gt;data8&lt;/label&gt;
              &lt;input type="text" value="data8" /&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;label&gt;data9&lt;/label&gt;
              &lt;input type="text" value="data9" /&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;label&gt;data10&lt;/label&gt;
              &lt;input type="text" value="data10" /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;input id="printdata" type="button" value="printdata" /&gt;
  &lt;div class="showresult"&gt;1: &lt;span&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;div class="showresult"&gt;2: &lt;span&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;div class="showresult"&gt;3: &lt;span&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;div class="showresult"&gt;4: &lt;span&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;div class="showresult"&gt;5: &lt;span&gt;&lt;/span&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('#table1 input').hide();
  $('#printdata').fadeTo(0, 0);
  
  // This shows or hides the button deppending on the inputs
  $('#table1 tr').on('change keyup click', function() {
      var text = '';
      $('input', this).each(function(){
          text += $(this).val();
      });
  
      if (text !='')
      {
          $('#printdata').fadeTo(0, 100);
      }
      else
      {
          $('#printdata').fadeTo(0, 0);
      }
  });
  
  $('#table1 tr').on('click', function (e) {
      if ($( e.target ).is("input") || $( e.target ).is("th") ) {
          return;
      } else if ($(this).hasClass('selected')) {
          $(this).toggleClass('selected');
          $('input', this).toggle();
          $('label', this).toggle();
      } else { 
          $('tr.selected input').hide();
          $('tr.selected label').toggle();
          $('tr.selected').toggleClass('selected');
          $(this).toggleClass('selected');
          $('label', this).toggle();
          $('input', this).toggle();
      }
  });
  
  
  
  $('#printdata').click(function () {
      $('.showresult').each(function (index) {
          $('span', this).html('');
          $('span', this).html($('#table1 .selected input').eq(index).val());
      });
  });
  </code></pre>