Jquery-select2 clone select tag

[ricardoaguilarm]

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">
    <label>For:</label>
    <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>
    </select>
  </div>
<!-- SPECIFIC GROUPS -->
<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>
  </div>
</div>

JavaScript-Jquery-Select2

 // LOAD CUSTOMERS GROUPS 
  $("#id_select_specific_groups").select2({ 
    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>" +
      "</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>" +
      "</div>" 
      );

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

    return $container;
  }

[lasjorg]

@ricardoaguilarm

Normal Javascript clone techniques doesn’t work.

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>
  </select>
  <button type="button" id="clone">Clone</button>
</form>

const cloneBtn = document.querySelector("#clone");
const selectElement = document.querySelector("#select");
const formElement = document.querySelector("#form");

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

Node: cloneNode() method - Web APIs | MDN

[ricardoaguilarm]

select2 copy input

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