title: How to add dropdown into AddEditDelete dynamically using jQuery
body: <p>I have add/delete/edit dynamically using <code>jQuery</code> and i wanted to put <code>dropdown</code> menu into a column. Is there possible ?</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>function edit_row(no) {
    document.getElementById("edit_button" + no).style.display = "none";
    document.getElementById("save_button" + no).style.display = "block";
  
    var component = document.getElementById("component_row" + no);
    var kra = document.getElementById("kra_row" + no);
    var kpi = document.getElementById("kpi_row" + no);
    var sfa = document.getElementById("sfa_row" + no);
    var target = document.getElementById("target_row" + no);
    var weightage = document.getElementById("weightage_row" + no);
  
    var component_data = component.innerHTML;
    var kra_data = kra.innerHTML;
    var kpi_data = kpi.innerHTML;
    var sfa_data = sfa.innerHTML;
    var target_data = target.innerHTML;
    var weightage_data = weightage.innerHTML;
  
    component.innerHTML = "&lt;input type='text' id='component_text" + no + "' value='" + component_data + "'&gt;";
    kra.innerHTML = "&lt;input type='text' id='kra_text" + no + "' value='" + kra_data + "'&gt;";
    kpi.innerHTML = "&lt;input type='text' id='kpi_text" + no + "' value='" + kpi_data + "'&gt;";
    sfa.innerHTML = "&lt;input type='text' id='sfa_text" + no + "' value='" + sfa_data + "'&gt;";
    target.innerHTML = "&lt;input type='text' id='target_text" + no + "' value='" + target_data + "'&gt;";
    weightage.innerHTML = "&lt;input type='text' id='weightage_text" + no + "' value='" + weightage_data + "'&gt;";
  }
  
  function save_row(no) {
    var component_val = document.getElementById("component_text" + no).value;
    var kra_val = document.getElementById("kra_text" + no).value;
    var kpi_val = document.getElementById("kpi_text" + no).value;
    var sfa_val = document.getElementById("sfa_text" + no).value;
    var target_val = document.getElementById("target_text" + no).value;
    var weightage_val = document.getElementById("weightage_text" + no).value;
  
    document.getElementById("component_row" + no).innerHTML = component_val;
    document.getElementById("kra_row" + no).innerHTML = kra_val;
    document.getElementById("kpi_row" + no).innerHTML = kpi_val;
    document.getElementById("sfa_row" + no).innerHTML = sfa_val;
    document.getElementById("target_row" + no).innerHTML = target_val;
    document.getElementById("weightage_row" + no).innerHTML = weightage_val;
  
    document.getElementById("edit_button" + no).style.display = "block";
    document.getElementById("save_button" + no).style.display = "none";
  }
  
  function delete_row(no) {
    document.getElementById("row" + no + "").outerHTML = "";
  }
  
  function add_row() {
    var new_component = document.getElementById("new_component").value;
    var new_kra = document.getElementById("new_kra").value;
    var new_kpi = document.getElementById("new_kpi").value;
    var new_sfa = document.getElementById("new_sfa").value;
    var new_target = document.getElementById("new_target").value;
    var new_weightage = document.getElementById("new_weightage").value;
  
    var table = document.getElementById("data_table");
    var table_len = (table.rows.length) - 1;
    var row = table.insertRow(table_len).outerHTML = "&lt;tr id='row" + table_len + "'&gt;&lt;td  id='component_row" + table_len + "'&gt;" + new_component + "&lt;/td&gt;&lt;td id='kra_row" + table_len + "'&gt;" + new_kra + "&lt;/td&gt;&lt;td id='kpi_row" + table_len + "'&gt;" + new_kpi + "&lt;/td&gt;&lt;td id='sfa_row" + table_len + "'&gt;" + new_sfa + "&lt;/td&gt;&lt;td id='target_row" + table_len + "'&gt;" + new_target + "&lt;/td&gt;&lt;td id='weightage_row" + table_len + "'&gt;" + new_weightage + "&lt;/td&gt;&lt;td&gt;&lt;input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'&gt; &lt;input type='button' id='save_button" + table_len + "' value='Save' class='save' onclick='save_row(" + table_len + ")'&gt; &lt;input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'&gt;&lt;/td&gt;&lt;/tr&gt;";
  
    document.getElementById("new_component").value = "";
    document.getElementById("new_kra").value = "";
    document.getElementById("new_kpi").value = "";
    document.getElementById("new_sfa").value = "";
    document.getElementById("new_target").value = "";
    document.getElementById("new_weightage").value = "";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    width: 100%;
    display: block;
  }
  
  table {
    border-collapse: collapse;
    width: 100%;
    font-family: Calibri;
    font-size: 12px;
    margin: 0 auto
  }
  
  th,
  td {
    position: center;
    border: 1px solid black;
    padding: 5px;
  }
  
  input {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 100%;
    border-width: 1;
    overflow: hidden;
    word-wrap: break-word;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;table align='center' cellspacing=2 cellpadding=5 id="data_table"&gt;
  
      &lt;tr&gt;
        &lt;th&gt;Component&lt;/th&gt;
        &lt;th&gt;KRA&lt;/th&gt;
        &lt;th&gt;KPI&lt;/th&gt;
        &lt;th&gt;SFA&lt;/th&gt;
        &lt;th&gt;Target&lt;/th&gt;
        &lt;th&gt;Weightage %&lt;/th&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td&gt;&lt;input type="text" id="new_component"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" id="new_kra"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" id="new_kpi"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" id="new_sfa"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" id="new_target"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" id="new_weightage"&gt;&lt;/td&gt;
        &lt;td style="border:0px;"&gt;&lt;input type="button" class="add" onclick="add_row();" value="Add Row"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
    &lt;/table&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So , i wanted to put <code>dropdown</code> on SFA when click Add Row button the new row will generate and also <code>dropmenu</code> on SFA will display. Basically i have tried input select option on <code>javascript</code> but when i click Add Row button there is like no function happen. </p>