title: how to add Button to a select2 dropdown on a dynamic table
body: <p>Good day!</p>
  <p>I'm doing a Dynamic table which you can add/remove row, and I'm using select2 to search Items on the database via ajax and its working well at the moment, then I want to add another button (&quot;add new item&quot;)  to my select2's input box. It was also working but when I add another row, the previous rows will have 2 (add new item) buttons on it, and when I add another row something weird is happening on my input box then.</p>
  <ol>
  <li><p>Without adding new rows
  <img src="https://i.stack.imgur.com/mbxf5.png" alt="enter image description here" /></p>
  </li>
  <li><p>After adding new rows<img src="https://i.stack.imgur.com/7soxl.png" alt="enter image description here" /><img src="https://i.stack.imgur.com/UqLTx.png" alt="enter image description here" /><img src="https://i.stack.imgur.com/YzHUj.png" alt="enter image description here" /></p>
  </li>
  </ol>
  <p>Here is my code:</p>
  <pre><code>$(document).ready(function() {  
     addRow();
  });
  </code></pre>
  <p>addRow.js</p>
  <pre><code>var rowCount = document.getElementById('tblItemList').rows.length - 1 ;
  var rowArrayId = rowCount ;
  
  function addRow(){
  var toBeAdded = document.getElementById('toBeAdded').value;
  if (toBeAdded=='')
      { toBeAdded = 2; }
  else if(toBeAdded&gt;10)
  {
    toBeAdded = 10;
  }
  
    for (var i = 0; i &lt; toBeAdded; i++) {
      var rowToInsert = '';
      rowToInsert = &quot;&lt;tr&gt;&lt;td&gt;&lt;input id='itemId&quot;+rowArrayId+&quot;' name='product[&quot;+rowArrayId+&quot;][name]' class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' /&gt;&lt;/td&gt;&quot;;
      $(&quot;#tblItemList tbody&quot;).append(
          rowToInsert+
          &quot;&lt;td&gt;&lt;textarea readonly name='product[&quot;+rowArrayId+&quot;][description]' class='form-control description' rows='1' &gt;&lt;/textarea&gt;&lt;/td&gt;&quot;+
          &quot;&lt;input type='hidden' name='product[&quot; + rowArrayId + &quot;][itemId]' id='itemId'&gt;&quot;+
          &quot;&lt;td&gt;&lt;input type='number' min='1' max='9999' name='product[&quot;+rowArrayId+&quot;][quantity]' class='qty form-control' required /&gt;&quot;+
          &quot;&lt;input id='poItemId' type='hidden' name='product[&quot; + rowArrayId + &quot;][poContentId]'&gt;&lt;/td&gt;&quot;+
          &quot;&lt;td&gt;&lt;input type='number' min='1' step='any' max='9999' name='product[&quot;+rowArrayId+&quot;][price]' class='price form-control' required /&gt;&lt;/td&gt;&quot;+
          &quot;&lt;td class='subtotal'&gt;&lt;center&gt;&lt;h3&gt;0.00&lt;/h3&gt;&lt;/center&gt;&lt;/td&gt;&quot;+
          &quot;&lt;input type='hidden' name='product[&quot;+rowArrayId+&quot;][delete]' class='hidden-deleted-id'&gt;&quot;+
          &quot;&lt;td class='actions'&gt;&lt;a href='#' class='btnRemoveRow btn btn-danger'&gt;x&lt;/a&gt;&lt;/td&gt;&quot;+
          &quot;&lt;/tr&gt;&quot;);
          
  var rowId = &quot;#itemId&quot;+rowArrayId;
  
  $(rowId).select2({
      placeholder: 'Select a product',
      formatResult: productFormatResult,
      formatSelection: productFormatSelection,
      dropdownClass: 'bigdrop',
      escapeMarkup: function(m) { return m; },
      minimumInputLength:1,
      ajax: {
          url: '/api/productSearch',
          dataType: 'json',
          data: function(term, page) {
              return {
                  q: term
              };  
          },  
          results: function(data, page) {
              return {results:data};
          }   
      }   
  });
  
  rowArrayId = rowArrayId + 1;
       };
  
  $(&quot;.select2-drop&quot;).append('&lt;table width=&quot;100%&quot;&gt;&lt;tr&gt;&lt;td class=&quot;row&quot;&gt;&lt;button class=&quot;btn btn-block btn-default btn-xs&quot; onClick=&quot;modal()&quot;&gt;Add new Item&lt;/button&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;');
  
  
  
  function productFormatResult(product) {
  var html = &quot;&lt;table&gt;&lt;tr&gt;&quot;;
  html += &quot;&lt;td&gt;&quot;;
  html += product.itemName ;
  html += &quot;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&quot;;
  return html;
  }
  
  function productFormatSelection(product) {
  var selected = &quot;&lt;input type='hidden' name='itemId' value='&quot;+product.id+&quot;'/&gt;&quot;;
  return selected + product.itemName;
  }
      $(&quot;.qty, .price&quot;).bind(&quot;keyup change&quot;, calculate);
  };
  </code></pre>
  <p>Please Help me find solution for this one, been trying to solve this on my own but I cant get it working. Any suggestions, answers and comments would really be appreciated. Thank you very much and have a good day!</p>