JSFiddle - React, Tailwind, and code Playground

by houmie

HTML

<select class="x1">
    <option value="-">...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<input type="button" value="Clone" id="clone">
<input type="button" value="Clone after setting selected" id="cloneSel">
<input type="button" value="Reset" id="clear">

<div class="out"></div>

CSS

.x1 {
    margin: 5px;  
    clear: right;
    display: inline-block;    
    clear: right;
}
.out {
    padding: 5px;
    background-color: #ddd;    
}

JavaScript

$('#clone').click(function() {
    $('.x1:first').clone().appendTo('.out');
    $('.out').append('Clone<br>');
});
$('#cloneSel').click(function() {
    var v = $('.x1:first').val();
    $('.x1:first option').removeAttr('selected');
    $('.x1:first option').each(function() {
        if($(this).attr('value') == v)  {
            $(this).attr('selected', true);
        }
    });
    $('.x1:first').clone().appendTo('.out');
    $('.out').append('Clone after setting selected<br>');
});
$('#clear').click(function() {
    $('.x1').not(':first').remove();
});