title: how to add and delete a row in a table using jquery + node js
body: <p>I have created a table with two select boxes and a single text box in jade.</p>
  
  <p>When I click my button to add more rows, after the user has changed the second select box, by changing a selection in the first using ajax, my row addition code stops working.</p>
  
  <p>Can anyone see in the following code where I may be going wrong. </p>
  
  <p><strong>My jade code:</strong></p>
  
  <pre><code>form(method ='Post', action='/orderlist/#{login_id}', data-bv-message='') 
                .form-group
                 input.form-control(type='text', name='order_date', value='', id='orderdate' ,placeholder='Enter the date' style='width:65%;') 
                .table-responsive
                 table#item_table.items.table.table-striped.table-bordered
                  thead
                   tr
                    th(style='min-width: 200px;') Menu
                    th(style='min-width: 200px;') Item
                    th(style='min-width: 200px;') Item Quantity  
                    //th(style='min-width: 200px;') Action 
                  tbody
                   tr
                    td(style='vertical-align: top; width:150px')
                      select.form-control(name='menu' , class = 'menu_list' , id="menu_item" )
                       option(value='' ) ---Select---
                       each val in orders
                        option(name = 'food' ,value=' #{val.availability_type }' , selected = selected) #{val.availability_type } 
                    td(class='item_select' style='vertical-align: top; width:150px')
                      select.form-control(name=""  )
                       option(value='' ) ---Select---
                    td(style='vertical-align: top; width:150px')
                      input.form-control(type='text',placeholder='Enter the quantity' value='', name='order_qty')
                    //td(style='vertical-align: top; width:150px')
                      //button.btn.btn-success.color(type='button',value='addrow',name='add',class='addRow') Add 
                      //&amp;nbsp 
                      //button.btn.btn-success.color(type='button',value='removerow',name='remove' id='deleteRow') Delete 
                .pull-left
                  .form-group
                   button#forgot-btn.btn.btn-success.color(type='submit',value='ordered',name='submit') Submit 
                   &amp;nbsp 
                   button#forgot-btn.btn.btn-success.color(type='cancel',value='cancelled',name='cancel') Cancel
                .pull-right
                  .form-group 
                   button.btn.btn-success.color(type='button',value='addrow',name='add' , id="addRow") Add 
                   &amp;nbsp 
                   button.btn.btn-success.color(type='button',value='removerow',name='remove' id='deleteRow') Delete 
  </code></pre>
  
  <p><strong>My ajax code</strong> :
  script.</p>
  
  <pre><code>$.noConflict();
  $(document).ready(function() {
  
  $('.menu_list').change(function() {
  var menus = $('.menu_list').val();
  console.log($(this).val());
  var t = $(this);
  t.parents('tr').find('.item_select').html("kkkkk");
  
    $.ajax({
      url: '/submenu',
      type: "POST",
      dataType: 'json',
      data: {"menu": menus},
      success: function(item) {
  
      var selectList = "&lt;select name='item'  class='form-control'&gt;";
        $.each(item, function(key, value){
         //var product_id = value.product_id;
          selectList += "&lt;option value='"+value.product_id+"'&gt;"+value.product_name+"&lt;/option&gt;";
        }); 
        selectList +="&lt;/select&gt;";
        t.parents('tr').find('.item_select').html(selectList);
      }
    });
  });
  $('#addRow').click(function(){
  alert("table");
  $('#item_table tbody').append($("#item_table tbody tr:last").clone());
  }); 
  </code></pre>