Chosen jquery library not working when copy and append to another row-CodePudding

In a table, I have 1 row with two multiple select tag in different cell. Both are using chosen Jquery library, I want to clone the row when user click on "Add Row" and append to the same table.

But, the Chosen Jquery library is not working in the cloned row. It have add the chosen tags, but is not showing in the browser.

Edit: This is my function where I clone the row and append to the same table at the last row.

$(document).ready(function() {
  $(".chosen-select").chosen();
});

function addRow() {
  $("#item_table tbody tr:last").clone().appendTo($("#item_table tbody"));
    $("#item_table tbody tr:last .chosen-select").chosen();
    $("#item_table tbody tr:last .chosen-select").trigger("chosen:updated");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>

<div>
  <button onclick="addRow()">Add Row</button>
  <table id="item_table">
    <thead>
      <tr>
        <td>Title</td>
        <td>Day</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" name="title" /></td>
        <td>
          <select name="day" multiple  data-placeholder="Please select">
            <option value="1">Monday</option>
            <option value="2">Tuesday</option>
            <option value="3">Wednesday</option>
            <option value="4">Thursday</option>
            <option value="5">Friday</option>
            <option value="6">Saturday</option>
            <option value="7">Sunday</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
</div>

CodePudding user response：

For work Dropdown, you just need to create a unique id of each element before the clone

 clone.find("#select" prev).attr("id", "select" i);

and for remove previous selected clone record

clone.find("#select" prev "_chosen").attr("id", "select" i "_chosen1");
document.getElementById("select" i "_chosen1").outerHTML=""

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>
<script>
$(document).ready(function() {
  $("#select0").chosen();
});
var i=1;
var prev =0;
function addRow() {
 var clone = $("#item_table tbody tr:last").clone()
 clone.find("#txtinput" prev).attr("id", "txtinput" i);
             clone.find("#select" prev).attr("id", "select" i);
            clone.find("#select" prev "_chosen").attr("id", "select" i "_chosen1");
 clone.appendTo($("#item_table tbody"));
document.getElementById("select" i "_chosen1").outerHTML=""
$myid = $('#select'   i);
$myid.show().chosen();
     i  ;
     prev  ;
}
</script>
</head>
<body>

<div>
  <button onclick="addRow()">Add Row</button>
  <table id="item_table">
    <thead>
      <tr>
        <td>Title</td>
        <td>Day</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" name="title" id="txtinput0" /></td>
        <td>
          <select name="day" multiple  id="select0" data-placeholder="Please select">
            <option value="1">Monday</option>
            <option value="2">Tuesday</option>
            <option value="3">Wednesday</option>
            <option value="4">Thursday</option>
            <option value="5">Friday</option>
            <option value="6">Saturday</option>
            <option value="7">Sunday</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>