title: jQuery how to append data at table use input fields
body: <p>I am working with a table, and I am having some issues. In most normal cases, I have 4 input fields in which I can add some data and send it to the table in my view. But if it so happens that I have more the 4 values, and I need to add more, I have added a button called <strong>"Plus"</strong> which clears previous values from the field, and waits for a user to add new ones.</p>
  
  <p>So the button <strong>"Plus"</strong> adds data to table, but after pressing the button <strong>Send to table</strong> all the data disappears.</p>
  
  <p>Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.coButton').on('click', function() {
    $('.changeoverTable').show();
    var arrNumber = new Array();
    $(".changeoverTable &gt; tbody").html('');
    $('input[type=text]').each(function(i) {
  
      arrNumber.push($(this).val());
      if (arrNumber[i]) {
        $(".changeoverTable &gt; tbody").append('&lt;tr&gt;&lt;td&gt;Data&lt;/td&gt;&lt;td&gt;' + arrNumber[i] + '&lt;/td&gt;&lt;/tr&gt;');
      }
  
    })
  });
  
  
  $('.plusButton').on('click', function() {
    var value = $('#opBarcode').val()
    console.log(value);
    $(".changeoverTable &gt; tbody").append('&lt;tr&gt;&lt;td&gt;Data&lt;/td&gt;&lt;td&gt;' + value + '&lt;/td&gt;&lt;/tr&gt;');
    $("#opBarcode").val('');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #f5f5f5;
  }
  
  .hide {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;center&gt;&lt;input type="text" placeholder="Enter number of data"&gt;&lt;/center&gt;
  &lt;center&gt;&lt;button class="coButton"&gt;Send to table&lt;/button&gt;&lt;/center&gt;
  &lt;center&gt;&lt;input type="text" id="opBarcode" placeholder="Enter number of layers"&gt;&lt;button class="plusButton"&gt;Plus&lt;/button&gt;&lt;/center&gt;
  &lt;center&gt;&lt;button class="coButton"&gt;Send to table&lt;/button&gt;&lt;/center&gt;
  &lt;center&gt;&lt;input type="text" placeholder="Enter number of nest"&gt;&lt;/center&gt;
  &lt;center&gt;&lt;button class="coButton"&gt;Send to table&lt;/button&gt;&lt;/center&gt;
  &lt;center&gt;&lt;input type="text" placeholder="Enter number of layers"&gt;&lt;/center&gt;
  &lt;center&gt;&lt;button class="coButton"&gt;Send to table&lt;/button&gt;&lt;/center&gt;
  &lt;table class="changeoverTable hide"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th colspan="3"&gt;Table&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;&lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>