Dynamically adding select2 to DOM which gets data from DB - php

Question

I have a HTML table where user can choose products from MySql db.
I have a "add new row" possibility where new row is added to DOM.
Once I add new row, select-2 is no longer functioning in this new row - I beleive it is a problem, that it is searching for input only in first example of select-2 dropdown. How can I show dropdown for each instance?
Code:
<table id="add_new" style="width: 100%; margin-top:40px;" class="col-12 col-lg-12 col-md-12 col-sm-12 col-xl-12">
<thead>
<tr>
<th style="text-align:left; font-size: 10px; color:#8f8f8f; padding-bottom: 15px; width: 10%;">
Zap. št.: </th>
<th style="text-align:left; font-size: 10px; color:#8f8f8f; padding-bottom: 15px; width: 50%;">
Naziv artikla </th>
<th style="text-align:left; font-size: 10px; color:#8f8f8f; padding-bottom: 15px; width: 20%;">
Količina </th>
<th style="text-align:right; font-size: 10px; color:#8f8f8f; padding-bottom: 15px; width: 20%;">
EM (kos/m/colli,...) </th>
</tr>
</thead>
<tbody>
<tr id="mainsection">
<td> <p href="#" id="count" style="font-size: 13px; text-decoration: none; line-height: 1; color:#909090; margin-top:0px; margin-bottom:0;">
1</p> </td>
<td contenteditable style="padding-top:0px; padding-bottom:5px;">
<h4 style="font-size: 16px; line-height: 1; margin-bottom:0; color:#303030; font-weight:500; margin-top: 10px;">
<select class="form-control select2-multiple" id="dd_artikli" data-width="100%">
<option value="">Select country</option>
<?php
if (count($itemRecords_artikli) > 0) {
foreach ($itemRecords_artikli as $ct) {
?>
<option value="<?php echo $ct['id']; ?>">
<?php echo $ct['name']; ?>
</option>
<?php
}
}
?>
</select>
</h4>
</td>
<td contenteditable> <p href="#" style="font-size: 13px; text-decoration: none; line-height: 1; color:#909090; margin-top:0px; margin-bottom:0;"> </p> </td>
<td contenteditable style="padding-top:0px; padding-bottom:0; text-align: right;"> <p style="font-size: 13px; line-height: 1; color:#303030; margin-bottom:0; margin-top:0; vertical-align:top; white-space:nowrap;"> </p> </td>
</tr>
</tbody>
</table>
<script>
var number = 1;
document.getElementById("newsectionbtn").onclick = function() {
var container = document.getElementById("add_new");
var section = document.getElementById("mainsection");
var count = document.getElementById('count');
number++;
count.textContent = number.toString();
container.appendChild(section.cloneNode(true));
}
</script>
<
?php
/*
#Author: Sanjay Kumar
#Project: PHP MySQLi How To Use Select2 for Multiple Select Tutorial
#Email: onlinewebtutorhub#gmail.com
#Website: https://onlinewebtutorblog.com/
*/
// Include the database configuration file
require 'dbconfig.php';
$countrySelect = $conn->prepare("SELECT * FROM artikli");
$countrySelect->execute();
$countries = $countrySelect->get_result();
$itemRecords_artikli = array();
while ($item = $countries->fetch_assoc()) {
extract($item);
$itemDetails = array(
"id" => $id,
"name" => $naziv
);
array_push($itemRecords_artikli, $itemDetails);
}
?>

Answer 1

After drop-down bind run this command.
jQuery('#dd_artikli').select2();
Or use the jquery ready function.
$(document).ready(function() { jQuery('#dd_artikli').select2(); });