title: Adding/Removing Columns on a fixed number of rows in jquery
body: <p>Hi guys I'm trying to add/remove columns on a fixed number of rows:
  <a href="https://i.stack.imgur.com/nB3YX.png" rel="nofollow noreferrer">table in picture</a></p>
  
  <p>I was successful in cloning the column but have problems in removing them.
  Here's the <a href="https://i.stack.imgur.com/xZNLS.png" rel="nofollow noreferrer">result</a>.</p>
  
  <p>Here's  a snippet of what I was trying to do:</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>$(document).ready(function() {
    $('#addColumn').click(function(e) {
      // e.preventDefault();
      // $(this).before("&lt;input name='file[]' type='file' /&gt;");
      for (let index = 0; index &lt; 7; index++) {
        // const element = array[index];
        if (index == 0) {
          $("#tblSample tr").eq(index).append('&lt;td&gt;Detail &lt;button type="button" id="removeColumn"&gt;-&lt;/button&gt;&lt;/td&gt;');
        } else {
          $("#tblSample tr").eq(index).append('&lt;td&gt;&lt;input type="text"&gt;&lt;/td&gt;');
        }
      }
    });
  
    $('#tblSample thead').on('click', '#removeColumn', function(event) {
      for (let index = 0; index &lt; 7; index++) {
        // const element = array[index];
        $('#tblSample tr').eq(index).closest('td').remove();
      }
  
    });
  
  });
  
  &lt;</code></pre>
  </div>
  </div>
  </p>