title: How to create dropdown in an editable table which has multiple columns?
body: <p><a href="https://i.stack.imgur.com/vp4V6.png" rel="nofollow noreferrer">Image attached here</a></p>
  
  <p>I am creating a multi-line insert table using PHP, jquery, and AJAX. With this, the user can add more rows or remove rows from the table. </p>
  
  <p>Can anyone help me how to create a drop down in the column? I have 4 columns in the table and I want a drop-down on the item name. I am attaching the snap of the table. 
  Please help me guys, I am a beginner.</p>
  
  <pre><code>    [&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Testing&lt;/title&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;br/&gt;&lt;br/&gt;
      &lt;div class="container"&gt;
          &lt;br/&gt;
          &lt;h2 align="center"&gt;Multiple Line Insert into MySql using Ajax and jQuery in PHP&lt;/h2&gt;
          &lt;br/&gt;
          &lt;div class="table-responsive"&gt;
              &lt;table class="table table-bordered" id="crud_table"&gt;
                  &lt;tr&gt;
                      &lt;th width="30%"&gt;Item Name&lt;/th&gt;
                      &lt;th width="10%"&gt;Item Code&lt;/th&gt;
                      &lt;th width="45%"&gt;Description&lt;/th&gt;
                      &lt;th width="10%"&gt;price&lt;/th&gt;
                      &lt;th width="5%"&gt;&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td contenteditable="true" class="item_name"&gt;&lt;/td&gt;
                      &lt;td contenteditable="true" class="item_code"&gt;&lt;/td&gt;
                      &lt;td contenteditable="true" class="item_desc"&gt;&lt;/td&gt;
                      &lt;td contenteditable="true" class="item_price"&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;div align="right"&gt;
                  &lt;button type="button" name="add" id="add" class="btn btn-success btn-xs"&gt;+&lt;/button&gt;
              &lt;/div&gt;
              &lt;div align="center"&gt;
                  &lt;button type="button" name="save" id="save" class="btn btn-info"&gt;Save&lt;/button&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;div id="inserted_item_data"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;script&gt;
      $(document).ready(function(){
          var count =1;
          $('#add').click(function(){
              count = count + 1;
              var html_code = "&lt;tr id='row"+count+"'&gt;";
              html_code += "&lt;td contenteditable='true' class='item_name'&gt;&lt;/td&gt;";
              html_code += "&lt;td contenteditable='true' class='item_code'&gt;&lt;/td&gt;";
              html_code += "&lt;td contenteditable='true' class='item_desc'&gt;&lt;/td&gt;";
              html_code += "&lt;td contenteditable='true' class='item_price'&gt;&lt;/td&gt;";
              html_code += "&lt;td&gt;&lt;button type= 'button' name='remove' data-row='row"+count+" 'class= btn btn-danger btn-xs remove'&gt;-&lt;/button&gt;&lt;/td&gt;";
              html_code +="&lt;/tr&gt;";
              $('#crud_table').append(html_code);
  
          });
          $(document).on('click','.remove', function(){
              var delete_row = $(this).data("row");
              $('#' + delete_row).remove();
  
          });
      });
  &lt;/script&gt;][1]
  </code></pre>