JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-md-12" style="padding-left: 0px;padding-right: 0px; margin-bottom:20px;">
   <label class="col-md-3" for="nomeseelect"></label>
   <div class="col-md-9" id="input-group" style="">
      <div class="row" id="addfilters">
         <div id="1" class="col-md-12" style="margin-bottom: 20px;">
            <div class="row">
               <div class="col-md-4">
                  <select id="systemfields_1" style="width: 100%; height: 80px;" class="form-control select2-multiple_1" placeholder="Select one/multiple filters" onchange="Getvaluesselect(1)">
                     <option disabled selected value></option>
                     <option value="@field">@field</option>
                     <option value="@field2">@field2</option>
                     }
                  </select>
               </div>
               <div class="col-md-4">
                  <select style="width: 100%;" class="form-control select2-multiple_1"    >
                     <option disabled selected value></option>
                     <option value="equals">equals</option>
                     <option value="notequal">not equal to</option>
                  </select>
               </div>
               <div class="col-md-4" id="div3_1">
                  <select style="width: 100%;" class="form-control select2-multiplethird_1" multiple>
                  </select>
               </div>
            </div>
         </div>
         <br /><br />
      </div>
   </div>
</div>
<div class="col-md-12" style="padding-left: 0px;padding-right: 0px; margin-bottom:20px;">
   <label class="col-md-3"></label>
   <div class="col-md-9" id="input-group" style="">
      <button type="button"  onclick="addnewfilter()">+ Add Condition</button>
   </div>
</div>

JavaScript

$(function() {
    $(".select2-multiple_1").select2({
        allowClear: true,
        placeholder: "Select option"
    });
});

$(function() {
    $(".select2-multiplethird_1").select2({
        allowClear: true,
        placeholder: "Select option/options"
    });
});




$(function() {
    $("#countriesselect").select2({
        allowClear: true
    });
});


function addnewfilter() {
    var ids = [];

    $('#addfilters > div').map(function() {
        ids.push(this.id);
    });

    //for (let index = 0; index < ids.length; ++index) {
    //    alert('.select2-multiple_' + String(ids[index]));
    //    alert($('.select2-multiple_' + String(ids[index])));
    //    $('.select2-multiple_' + String(ids[index])).select2('destroy');
    //    $('.select2-multiplethird_' + String(ids[index])).select2('destroy');
    //    //const element = ids[index];
    //    // ...use `element`...
    //}

    var oldhtml = document.getElementById("addfilters").innerHTML;
    document.getElementById("addfilters").innerHTML = oldhtml +
        `
            <div id="` + String(parseInt(ids[ids.length - 1]) + 1) + `" class="col-md-12" style="margin-bottom: 20px;">
                <div class="row">
                    <div class="col-md-4">
                        <select id="systemfields_` + String(parseInt(ids[ids.length - 1]) + 1) + `" style="width: 100%; height: 80px;" class="form-control select2-multiple_` + String(parseInt(ids[ids.length - 1]) + 1) + `" placeholder="Select one/multiple filters" onchange="Getvaluesselect(` + String(parseInt(ids[ids.length - 1]) + 1) + `)">
                            <option disabled selected value></option>
                            @foreach (var field in ViewBag.Systemfields)
                            {
                                <option value="@field">@field</option>
                     <option value="@field2">@field2</option>
                            }
                        </select>
                    </div>

         ...