JSFiddle - React, Tailwind, and code Playground

by straeger

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</option>
            <option value="b">b</option>
            <option value="c">c</option>
        </select>
    </div>
</div>
</form>

<br/><br/>

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

JavaScript

$(function() {
    $("#sample").select2({ width: "250"});
    
    $("#sample").val('c');
    
    var valBeforeClone = $("#sample").val();
    $("#beforeClone").val(valBeforeClone);
    
    window.$c = $("#test123").clone(true,true);
    var valAfterClone = $c.find("#sample").val();
    $("#afterClone").val(valAfterClone);
    
});