JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<div class="container">
  <div class="row" id="row_0">
    <div class="col-md-12">
      <form id="form_0" onsubmit="return false;">
        <select class="select2" name="test1" id="test1_0">
          <option value="o_test">o_test1_1</option>
          <option value="o_test">o_test1_2</option>
          <option value="o_test">o_test1_3</option>
        </select>
        <select class="select2" name="test2" id="test2_0">
          <option value="o_test">o_test2_1</option>
          <option value="o_test">o_test2_2</option>
          <option value="o_test">o_test2_3</option>
        </select>

        <button onclick="addRow()">clone</button>
      </form>
    </div>
  </div>
</div>

CSS

select {
  width: 300px;
}

JavaScript

function addRow() {
  var div = $('div[id^="row"]:last');
  var num = parseInt( div.prop("id").match(/\d+/g), 10 ) +1;
  var clone = div.clone().prop('id', 'row_'+num );
  clone.find('[id]').each(function(){var $this = $(this); $this.prop('id', $this.prop('id').split('_')[0] + '_' + num);});

  div.after( clone );
}

$(".select2").select2();