jquery-select for additional rows - php

Question

I am trying to use jquery-select2 in my select dropdown form. The form is in a table row and I can add new rows with the Add Button. When I click the Add Button it will make more rows for me and I have data that is generated from the database.
The problem is that the jquery-select2 only works for the select dropdown in the first row, but it does not function for the new rows I create. I have tried the $('#idone').select2(); , but it didn’t work. Below is my select form and code.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<div class="container">
<div class="row">
<form class="col-md-12">
<table class="table table-bordered" width="100%" id="dataTable" cellspacing="0">
<tr>
<td colspan="4" align="left"><button id="alertred" type="button" class="btn btn-sm btn-danger btn-flat pull-left delete_row" >Delete Row</button></td>
<td colspan="3" align="right"><button id="button2" type="button" class="btn btn-sm btn-success btn-flat pull-right add_row"> Add Row</button></td>
</tr>
<tr>
<td ></td>
<td>Dropdown One</td>
<td>Dropdown Two</td>
<td>details</td>
<td>Date</td>
</tr>
<tbody>
<tr valign="baseline" id="main_tr" class="main_tr" >
<td><input type="checkbox" name="deleterow" class="deleterow" ></td>
<td><select name="idone[]" class="onesub form-control" id="idone" required>
<option value="0">Select Account</option>
<option value="1">Laravel</option>
<option value="2">Jquery</option>
<option value="3">PHP</option>
<option value="4">React</option>
<option value="5">Jquery ui</option>
<option value="6">Android</option>
</select>
<select name="subone[]" class="suboneid" type="hidden"><option></option></select>
</td>
<td><select name="idtwo[]" class="twosub form-control" id="idtwo" required>
<option value="0">Select Account</option>
<option value="1">Laravel</option>
<option value="2">Jquery</option>
<option value="3">PHP</option>
<option value="4">React</option>
<option value="5">Jquery ui</option>
<option value="6">Android</option>
</select>
</td>
<td><input type="text" name="details[]" id="details" class="form-control"></td>
<td><input type="date" name="dateofentry[]" class="form-control"></td>
</tr>
<tr >
<td colspan="7" align="center"><input type="submit" id="submit" class="btn btn-info" value="Submit"></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
Below is the script to add more rows
<script type="text/javascript">
$(function() {
$(".add_row").click(function(){
var main_tr = $('#main_tr').clone();
var ml = $(".main_tr").length;
main_tr.find("label").remove();
main_tr.find("input").val("");
main_tr.find("select").val("");
main_tr.find("#idone").attr("id","idone"+ml );
main_tr.find("#idtwo").attr("id","idtwo"+ml );
main_tr.find("#details").attr("id","details"+ml );
main_tr.find("#date").attr("id","date"+ml );
$(main_tr).insertAfter('.main_tr:last');
});
$(".delete_row").click(function(){
$(".deleterow:checked").each(function () {
$(this).parents('.main_tr').remove();
});
});
});
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
});
});
$(function() {
$('#idone').select2();
$('#idtwo').select2();
});
$(document).ready(function()
{
$("body").on("change",".onesub",function(){
var headid=$(this).val();
var that = $(this);
var post_id = 'headid='+ headid;
$.ajax
({
type: "POST",
url: "ajaxpostone.php",
data: post_id,
cache: false,
success: function(suboneid)
{
$(that).parents("tr").find(".suboneid").html(suboneid);
}
});
});
});
</script>
How do I make this jquery-select2 work for the select dropdown in first row and every other new row I add to my form table.