Select2 not workign with dynamic created rows

#1

Hi Respected Sir!
I hope you are well and enjoying your life. Sir i am facing two issue during implementing filter/search in drop down list. The one issue that when I select value from the list, the drop down list unable to close automatically. the 2nd issue is that I am creating dynamic rows as per need, but the issue is when I create new row, then drop down list become unable to work, . here is my code

<!doctype html>

Medicine Re-Location Form 
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

Request Form

                    </div>

                    <th width="15%"><center>Product</th>                       
		<th width="10%"><center>Qty (No)</th>                    
				
		<th width="20%"><center>Remarks</th>
		<th width="5%"></th>

                                           
                     <button type="button" class="btn btn-sm btn-success" onclick="BtnAdd()">Add Item</button>                         
                    </th>

       <td><input type="text" class="form-control text-end" name="remarks3[]"  id="zzz" ></td>
	<td class="NoPrint"><button type="button" class="btn btn-success"  style="line-height: 1;" onclick="BtnDel(this)">x</button></td>
		
                  </tr>   </tbody> </table>

<script type="text/javascript">

function GetPrint()
{
    /*For Print*/
    window.print();
}

function BtnAdd()
{
    /*Add Button*/
    var v = $("#TRow").clone().appendTo("#TBody") ;
    $(v).find("input").val('');
    $(v).find("select.scode").select2();
    $(v).find("input").autocomplete({
        source: 'backend-script.php'  
    });
    $(v).removeClass("d-none");
    $(v).find("th").first().html($('#TBody tr').length - 1);
}

function BtnDel(v)
{
    /*Delete Button*/
       $(v).parent().parent().remove(); 
       GetTotal();

        $("#TBody").find("tr").each(
        function(index)
        {
           $(this).find("th").first().html(index);
        }

       );
}



function Calc(v)
{
    /*Detail Calculation Each Row*/
    var index = $(v).parent().parent().index();
    
    var qqq1 = document.getElementsByName("qty[]")[index].value;




    GetTotal();
}

function GetTotal()
{

    /*Footer Calculation*/   

    var sum=0;
    var amts =  document.getElementsByName("tot4[]");

    for (let index = 0; index < amts.length; index++)
    {
        var tot4 = amts[index].value;
        sum = +(sum) +  +(tot4) ; 
    }

    document.getElementById("totbil").value = sum;

    var gst =  document.getElementById("adv11").value;
    var net = +(sum) - +(gst);
    document.getElementById("netpayable1").value = net;

	

}
</script>
<script type="text/javascript">

function GetPrint()
{
    /*For Print*/
    window.print();
}
                   
                    
 
       function BtnAdd1()
{
    /*Add Button*/
    var v = $("#TRow1").clone().appendTo("#TBody1") ;
    $(v).find("input").val('');
    $(v).removeClass("d-none");
    $(v).find("th").first().html($('#TBody1 tr').length - 1);
}

function BtnDel1(v)
{
    /*Delete Button*/
       $(v).parent().parent().remove(); 
       GetTotal();

        $("#TBody1").find("tr").each(
        function(index)
        {
           $(this).find("th").first().html(index);
        }

       );
}
Select Product <?php include('db.php'); $sql = mysqli_query($con,"SELECT * FROM procd2"); while($row=mysqli_fetch_array($sql)) { echo ''.$row['pro1'].''; } ?>