JSFiddle - React, Tailwind, and code Playground

by Hüseyin BABAL

HTML

<div id="tempSelect" style="display:none">
    <select name="transect" data-mini="true" id="transect">
        <option value="">Transect_ </option>
        <option value = "RIGHT/SED-CORE">RIGHT/CORE</option>
        <option value = "RIGHT/HOOP">RIGHT/HOOP</option>
        <option value = "RIGHT/CHLPHL-1">RIGHT/TEMPLATE</option>
        <option value = "RIGHT/NONE">RIGHT/NONE</option>
    </select>
</div
    
<fieldset>
    <div class="_100">
    
     </div>
</fieldset>

<input type="button" name="newSelect" id="newSelect" value="New"/>

JavaScript

$("#newSelect").on("click", function() {
    var lastSelect = $("._100 select").last().attr("name");
    if (lastSelect != undefined) {
        var temp = lastSelect.split("_");
        var id = parseInt(temp[1]) + 1;
    } else {
        var id = 0;
    }
    $("#tempSelect select").attr("name", "transect_" + id);
    $("#tempSelect select").attr("id", "transect_" + id);
    $("#tempSelect select option:first").text("Transect_" + id);
    $("._100").append($("#tempSelect").html());
    
});