JSFiddle - React, Tailwind, and code Playground

by RoryMcCrossan

HTML

<select id="one">
    <option id="one_val_a" value="one">one</option>
    <option id="two_val_a" value="two">two</option>
    <option id="three_val_a" value="three">three</option>
    <option id="four_val_a" value="three">three</option>
    <option id="five_val_a" value="three">three</option>
    <option id="six_val_a" value="three">three</option>
</select>

<span id="pin"></span>
<br/>
<span id="workspace"></span>

JavaScript

$('#one').clone(true, true).attr('id', 'two').appendTo('#pin').find("option").each(function() {
    $(this).attr("id", $(this).attr("id").replace(/\_a$/, "_b"));
});;

//checking the ids of the options
$('option').each(function() {
   $('#workspace').append($(this).attr('id') + '<br/>'); 
});