所选插件不能处理表中动态创建的行

我必须说我是JQuery的初学者，但我经常尝试自己找出并解决问题。然而，现在我有一个问题，我卡住了我有一个动态添加行和选择框的表，用于单个删除或多个删除，除了添加行之外，一切都很好，但选择框不起作用，无论我做什么都不起作用。

<table id="dataTable">
<tr>
  <th><input type="checkbox" id="selectall" value="selectAll"/></th>
  <th>Field-1</th>
  <th>Field-2</th>
  <th>Field-3</th>
  <th>Field-4</th>
  <th>Field-5</th>
</tr>
  <tbody>
      <tr>
        <td><input type="checkbox"  class="check"></td>
        <td>
            <select name="input-1[]" class="chosen_select_L">
                <option></option>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </td>
        <td><input name="input-2[]" type="text" class="chosen_text"></td>
        <td><input name="input-3[]" type="text" class="chosen_text"></td>
        <td><input name="input-4[]" type="text" class="chosen_text"></td>
        <td>
            <select name="input-5[]" class="chosen_select_M">
                <option></option>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </td>
      </tr>
  </tbody>
</table>
<input type="button" value="Add Field" onClick="addRow('dataTable')" /> 
<input type="button" value="Remove Field" onClick="deleteRow('dataTable')"  /> 

JS

$(".chosen_select_L").chosen({
    disable_search_threshold: 10,
    no_results_text: "Oops, nothing found!"
  });
$(".chosen_select_M").chosen({
    disable_search_threshold: 10,
    no_results_text: "Oops, nothing found!"
  });
$(document).ready(function() {
    $('#selectall').click(function(event) {
        if(this.checked) { 
            $('.check').each(function() { 
                this.checked = true; 
            });
        }else{
            $('.check').each(function() { 
                this.checked = false; 
            });        
        }
    });
});
function addRow(dataTable) {
    var table = document.getElementById(dataTable);
    var rowCount = table.rows.length;
    if(rowCount < 11){
        var row = table.insertRow(rowCount);
        var colCount = table.rows[1].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[1].cells[i].innerHTML;
        }
    }else{
         alert("Maximum fields is 10.");
    }
}
function deleteRow(dataTable) {
    var table = document.getElementById(dataTable);
    var rowCount = table.rows.length;
    for(var i=2; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            if(rowCount <= 1) {
                alert("Cannot Remove all fields.");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}

我试着给不同的id或类名，视觉上一切看起来都很好，但不是一个单一的选择框实际上是工作的，除了在第一行不是动态创建的。

我已经创建了一个供你们查看的jsfiddle。任何帮助将不胜感激。由于