Jquery-select2 clone select tag

I have the following HTML syntax. The functionality is make it with Jquery-select2, I need press the green button and clone the select any Idea? Normal Javascript clone techniques doesn’t work.

<!-- FOR -->
<div id="id_container_show_for">
  <div class="form-group">
    <select id="id_select_for" class="form-control select2bs4" style="width: 100%;">
      <option value="all_users" selected>All Customers</option>
      <option value="specific_customers">Specific Customers</option>
      <option value="specific_emails">Specific Phone Numbers</option>
      <option value="specific_groups">Specific Group</option>
<div id="id_show_specific_groups" style="display: none; padding-left: 10px;">
  <div class="form-group"  id="asdf0">
    <label id="id_label_choose_groups">Choose group</label>
    <select class="select_specific_groups" id="id_select_specific_groups" style="width: 100%;"></select>
    <div style="cursor: pointer; background-color: #28a745 !important; margin-top: 5px; color: white; text-align: center;" id="btn_add_group">Add other group</div>


    ajax: {
      url: '',
      headers: { 'url': 'api/user-info-group/list/' },
      dataType: 'json',
      delay: 250,
      data: function (params) {
        return {
          q: params.term,
          site: site_marketing,
      processResults: function (data, params) {
        params.page = params.page || 1;

        return {
          results: data.items,
          pagination: {
            more: (params.page * 30) < data.total_count
      cache: true
    templateResult: formatGroup,
    templateSelection: formatGroupSelection
  function formatGroup (repo) {
    if (repo.loading) {
      return "Loading";

    var $container = $(
      "<div class='select2-result-repository clearfix' style='font-size: 14px;'>" +
      "<div class='select2-result-name' style='line-height: 14px !important;'></div>" +

    $container.find(".select2-result-name").text(`${ repo.name }`);

    return $container;
  function formatGroupSelection (repo) {
    var dataShow = null

    if (repo.text == "") {
      dataShow = repo
    } else {
      dataShow = JSON.parse(repo.text)

    var $container = $(
      "<div class='select2-result-repository clearfix' style='font-size: 14px; white-space: normal !important;'>" +
      "<div class='select2-result-name'></div>" +

    $container.find(".select2-result-name").text(`${ dataShow.name }`);

    return $container;

Why doesn’t cloning work? How are you doing it?

Clone example
<form id="form" action="">
  <select name="" id="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  <button type="button" id="clone">Clone</button>
const cloneBtn = document.querySelector("#clone");
const selectElement = document.querySelector("#select");
const formElement = document.querySelector("#form");

cloneBtn.addEventListener("click", () => {
  const newSelect = selectElement.cloneNode(true);

It works in plain HTML/JavaScript but Jquery-Select2 works weird:
(inside red line, is the main select tag) I don’t declare the rest of the tags

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.