I am facing an issue where the select element inside a div is not cloning correctly. The Select2 element does not retain the loaded values from the Django code when cloned. Is there a way to clone the div with all the Select2 element values intact? Currently, when I clone, it duplicates but the selects do not display the values. Thank you for your assistance.
<script>
counter = 0
function addTopic(){
$( "#select" ).clone().appendTo( "#trying" );
}
</script>
</head>
<body>
<button onclick="addTopic()">Add Topic</button>
<form action="{% url 'testing_show' %}">
<div id="trying">
<div id="select">
<select class="js-example-basic-multiple" multiple="multiple">
{% for taf_doc in taf_documents %}
<option value="{{ taf_doc.id }}">{{ taf_doc.taf.nom }}</option>
{% endfor %}
</select>
<select class="js-example-basic-multiple" multiple="multiple">
{% for ue_doc in ue_documents %}
<option value="{{ ue_doc.id }}">{{ ue_doc.ue.nom}}</option>
{% endfor %}
This is the header :
<head>
<meta charset="UTF-8">
<title>Title</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script>
$(document).ready(function(){
$(".js-example-basic-multiple").select2();
});//document ready
</script>