Copy and maintain usability of select

How Do I...
#1

Hi folks!
My main goal is copy the “select” below another select every time I press the button. Simple. BUT every “Select” should be independent and fully functional from the other “Select”. I already read the Documentation, but it has no examples like this one, and it is unclear.
CODEPEN with my example, Jquery and Select2 ready to work:
Example Codepen, Link

  <div id="id_show_specific_groups">
    <div id="form-specific-group">
      <select id="id_select_specific_groups"></select>
    </div>
    <button id="btn_add_group">Add other</button>
  </div>

Goal (or something like this / everytime I press the button):

  <div id="id_show_specific_groups">
    <div id="form-specific-group">
      <select id="id_select_specific_groups"></select>
      <select id="id_select_specific_groups"></select>
      <select id="id_select_specific_groups"></select>
      <select id="id_select_specific_groups"></select>
    </div>
    <button id="btn_add_group">Add other</button>
  </div>

Thanks in advance.

My JS code works fine, it’s something like this:

  $("#id_select_specific_groups").select2({ 
    ajax: {
      url: '',
      headers: { 'url': '' },
      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;
  }