After I append new row, select2 is not working - php

Question

I added new row in table by jquery, then select2 is not working
// Javascript
$("#add").click(function () {
$("#mytable").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() +'</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
});
//Html
<form method="POST" action="/store">
{{ csrf_field() }}
<h2>Invoice</h2>
<div>
<!-- Customer job-->
<div class="form-group job">
Customer job:
<select class="customer_job" name="customer_job">
#if(count($customers)>1)
#foreach($customers as $customer)
<option>{{$customer ->job}}</option>
#endforeach
#else
<p>No posts found</p>
#endif
</select>
</div>
<!--Date-->
<div class="form-group date">
Date:
<input type="date" name="date">
</div>
</div>
<br><br>
<table id="mytable">
<tr>
<th>ITEM</th>
<th>DESCRIPTION</th>
<th>QUANTITY</th>
<th>RATE</th>
<th>AMOUNT</th>
</tr>
<tr>
<td>
<select class="item" name="item">
#if(count($items)>1)
#foreach($items as $item)
<option>{{$item ->item_name}}</option>
#endforeach
#endif
</select>
</td>
<td>
<input type="text" name="description">
</td>
<td>
<input type="number" name="quantity" id="quantity" step="1">
</td>
<td>
<select class="rate" name="rate" id="rate">
#if(count($items)>1)
#foreach($items as $item)
<option>{{$item ->rate}}</option>
#endforeach
#endif
</select>
</td>
<td><input type="number" name="amount" id="amount" readonly /></td>
</tr>
</table><br>
<input type="submit" value="Save" class="submit">
<input type="button" value="Add" id="add" class="btn-primary add">
</form>

Answer 1

Change your js code with this code
var j =2;
$("#add").on('click', function () {
var data = '<tr><td><select class="item" name="item">#if(count($items)>1)#foreach($items as $item)<option>{{$item ->item_name}}</option> #endforeach #endif</select></td><td> <input type="text" name="description"></td> <td> <input type="number" name="quantity" id="quantity" step="1"> </td> <td> <select class="rate" name="rate" id="rate"> #if(count($items)>1) #foreach($items as $item) <option>{{$item ->rate}}</option> #endforeach #endif</select></td><td><input type="number" name="amount" id="amount" readonly /> <i class="fa fa-times-circle"></i></td></tr>';
$('#mytable tr:last').after(data);
j++;
$(".remCF").on('click', function () {
$(this).parent().parent().remove();
});
});
I hope it works