dropdown list not working after cloning

dropdown list not working after cloning

  2. I have the following code for cloning the cascading dropdownlist...it is working when the page is loading ...but after adding a dynamic row the dropdownlist in the newly added row is not working...Please help me...
  3. <!DOCTYPE html>
  4. <html>    
  5. <head>
  6.     <title></title> 
  7. </head>
  8. <body>
  9. <table border="1" id="table">
  10. <tr><td>
  11.     <select id="cat">
  12.        <option value="c">A</option>
  13.        <option value="p">B</option>
  14.        <option value="n">C</option>
  15.        <option value="k">D</option>
  16.     </select>
  17.    </td>
  18.    <td><select id="item"></select></td>
  19. </tr>
  20. </table>
  21. <INPUT type='button' value='Add Row' onclick="addRow('table')" />

  23. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  24. <script type="text/javascript">
  25.   c=new Array('a1','a2','a3');
  26.   p=new Array('p1','p2','p3');
  27.   n=new Array('n1','n2','n3');
  28.   k=new Array('k1','k2','k3');
  29.   populateSelect();

  31.   $(function() {
  32.      $('#cat').change(function(){
  33.         populateSelect();
  34.      });
  35.   });

  37.   function populateSelect(){
  38.     cat=$('#cat').val();
  39.     $('#item').html('');
  40.     eval(cat).forEach(function(t) { 
  41.         $('#item').append('<option>'+t+'</option>');
  42.     });
  43.   }
  44. </script>
  45. <script type="text/javascript">

  47.    function addRow(tableID)
  48.    {    
  49.        //return false; // Prevent page refresh
  50.        var table = document.getElementById(tableID);
  51.        var rowCount = table.rows.length;
  52.        var row = table.insertRow(rowCount);
  53.        var colCount = table.rows[0].cells.length;
  54.        for(var i=0; i<colCount; i++) {
  55.           var newcell = row.insertCell(i);
  56.           newcell.innerHTML = table.rows[0].cells[i].innerHTML;
  57.           //alert(newcell.childNodes);
  58.           switch(newcell.childNodes[0].type) {
  59.              case 'text':
  60.                 newcell.childNodes[0].value = '';
  61.                 break;
  62.              case 'checkbox':
  63.                 newcell.childNodes[0].checked = false;
  64.                 break;
  65.              case 'select-one':
  66.                 newcell.childNodes[0].selectedIndex = 0;
  67.                 break;
  68.           }
  69.        }
  70.        var frm = document.getElementsByName('leave');
  71.        //frm.submit(); // Submit
  72.        frm.reset();  // Reset 
  73.     }
  74. </script>

  76. </body>
  77. </html>