JSFiddle - React, Tailwind, and code Playground

by gubhaju

HTML

<div id="person">Person</div>
<fieldset class="step" id="person2_dummy">
    <legend>Persoonskaart 2</legend>
    <ul class="form_column">
        <li><label for="nickname_2">Roepnaam</label><input type="text" class="inputtext required" id="nickname_2_dummy" name="person2[nickname]"></li>
        <li><label for="prepositions_2">Tussenvoegsel(s)</label><input type="text" class="inputtext" id="prepositions_2_dummy" name="person2[prepositions]"></li>
        <li><label for="surname_2">Achternaam</label><input type="text" class="inputtext required" id="surname_2_dummy" name="person2[surname]"></li>
        <li>&nbsp;</li>
        <li><label for="bdate_day_2">Geboortedatum</label>
            <select class="required" name="person2[bdate_day]" id="bdate_day_2_dummy">
                <option value="">--</option>
                <option value="1">1</option>
            </select>
            <select class="required" name="person2[bdate_month]" id="bdate_month_2_dummy">
                <option value="">--</option>
                <option value="1">januari</option>
            </select>
            <select class="required" name="person2[bdate_year]" id="bdate_year_2_dummy">
                <option value="">--</option>
                <option value="2011">2011</option>
            </select>
        </li>
        <li><label for="sex_2">Geslacht</label><select class="inputselect required" id="sex_2_dummy" name="person2[sex]">
            <option value="MALE">Man</option>
            <option value="FEMALE">Vrouw</option>
        </select></li>
        <li>&nbsp;</li>
        <li><label for="national_id_2">BSN / Sofinummer</label><input type="text" class="inputtext required" id="national_id_2_dummy" name="person2[national_id]"><a class="tooltip" href="#" oldtitle="Uitleg BSN/Sofienummer"><img alt="" src="/cmsfile/70"></a></li>
            <li><label for="second_driver">Tweede bestuurder</label><input type="checkbox" class="inputtext" id="second_driver_dummy"...

JavaScript

var number = 2;
var after = $('#person'); // <-- yes, this does exist
$("#person"+number+"_dummy").clone().attr("id", "person" + number).find("input, select, div").each(function(){
    //alert($(this).attr("id"));
    $(this).attr("id", function(){
        var attr = $(this).attr("id");
        return attr.replace("_dummy", "");
    })
}).end().insertAfter(after);