JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.1/css/select2.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.1/js/select2.min.js"></script>
<form id="test123" >
<div class="real">
    <div class="sample-box">
        <select name="select-sample" id="sample">
            <option value="a">a Value</option>
            <option value="b">b Value</option>
            <option value="c">c Value</option>
        </select>
    </div>
</div>
</form>

<br/><br/>

<input id="beforeClone" type="text"/>
<input id="afterClone" type="text"/>

JavaScript

$(function() {
    // init a select2 box
    $("#sample").select2();
    
    // set a value different to the initial value
    $("#sample").select2("val", "c")
    
    //get the currently selected Value
    var valBeforeClone = $("#sample").val();
    $("#beforeClone").val(valBeforeClone);

    // reset select2 to maybe sync the values ?!-../
    $("#test123").find('select').select2('destroy');
    
    //clone the for and save it in window    
    window.$c = $("#test123").clone(true,true);
    
    //get the the value of the select2 form of the clone
    var valAfterClone = $c.find("#sample").val();
    $("#afterClone").val(valAfterClone);
  
});