Question

I’m having trouble copying an element in my page DOM. Here’s the code of the element I want to copy:

<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" name="second_driver"></li>
            <li style="visibility: hidden;" id="li_second_driver"><label for="license_2_dummy">Rijbewijsnummer</label><input type="text" class="inputtext" id="license_2_dummy" name="person2[license]"><script type="text/javascript">/*&lt;![CDATA[*/ 
            $("#second_driver").click(function() {
                if ($("#second_driver").is(":checked")) {
                    $("#li_second_driver").css("visibility", "visible");
                    $("#license_2").addClass("required");
                } else {
                    $("#li_second_driver").css("visibility", "hidden");
                    $("#license_2").removeClass("required");
                }
                determineOrderType();
            }); /*]]&gt;*/</script><br clear="all"></li>
        <li><label for="ice_1_2">Alarmnummer 1</label><input type="text" class="inputtext required" id="ice_1_2_dummy" name="person2[ice_1]"><a class="tooltip" href="#" oldtitle="Uitleg alarmnummer"><img alt="" src="/cmsfile/70"></a></li>
        <li><label for="ice_2_2">Alarmnummer 2</label><input type="text" class="inputtext" id="ice_2_2_dummy" name="person2[ice_2]"></li>
    </ul>
    <div style="display: none;">
        <label for="no-allergies_2_dummy">Geen allergieen</label><input type="checkbox" checked="checked" id="no-allergies_2_dummy" value="no-allergies" name="person2[allergies][]">
        <label for="no-blood-thinners_2_dummy">Geen bloedverdunners</label><input type="checkbox" checked="checked" id="no-blood-thinners_2_dummy" value="no-blood-thinners" name="person2[bloodthinners][]">
        <label for="no-heart-diseases_2_dummy">Geen hartaandoeningen</label><input type="checkbox" checked="checked" id="no-heart-diseases_2_dummy" value="no-heart-diseases" name="person2[heartdiseases][]">
    </div>
    <div class="form_column" id="medical_info_2_dummy">
        <ul class="form_medical">
            <li><em>Medische allergieen</em></li>
            <li><label for="lodine_2">Jodium</label>        <input type="checkbox" id="lodine_2_dummy" value="lodine" name="person2[allergies][]" class="inputcheckbox"></li>
            <li><label for="antibiotics_2">Antibiotica</label>  <input type="checkbox" id="antibiotics_2_dummy" value="antibiotics" name="person2[allergies][]"></li>
            <li><label for="contrast_2">Contrast</label>        <input type="checkbox" id="contrast_2_dummy" value="contrast" name="person2[allergies][]"></li>
            <li><label for="latex_2">Latex</label>      <input type="checkbox" id="latex_2_dummy" value="latex" name="person2[allergies][]"></li>
            <li><label for="penicillin_2">Penicilline</label>   <input type="checkbox" id="penicillin_2_dummy" value="penicillin" name="person2[allergies][]"></li> 

            <li><em>Hartaandoeningen</em></li>
            <li><label for="pacemaker_2">Pacemaker / ICD</label>    <input type="checkbox" id="pacemaker_2_dummy" value="pacemaker" name="person2[heartdiseases][]"></li>
            <li><label for="beta-blocker_2">Betablocker</label> <input type="checkbox" id="beta-blocker_2_dummy" value="beta-blocker" name="person2[heartdiseases][]"></li>
        </ul>
        <ul class="form_medical">
            <li><em>Gebruik van bloedverdunners</em></li>
            <li><label for="carbasalaatcalcium_2">Ascal</label> <input type="checkbox" id="carbasalaatcalcium_2_dummy" value="carbasalaatcalcium" name="person2[bloodthinners][]"></li>
            <li><label for="clopidogrel_2">Plavix</label>       <input type="checkbox" id="clopidogrel_2_dummy" value="clopidogrel" name="person2[bloodthinners][]"></li>
            <li><label for="acenocoumarol_2">Acenocoumarol</label><input type="checkbox" id="acenocoumarol_2_dummy" value="acenocoumarol" name="person2[bloodthinners][]"></li>
            <li><label for="fenprocoumon_2">Marcoumar</label>   <input type="checkbox" id="fenprocoumon_2_dummy" value="fenprocoumon" name="person2[bloodthinners][]"></li>

            <li><em>Overige</em></li>
            <li><label for="diabetes_2">Diabetes</label>        <input type="checkbox" id="diabetes_2_dummy" value="diabetes" name="person2[other][]"></li>
            <li><label for="deaf_2">Doof</label>            <input type="checkbox" id="deaf_2_dummy" value="deaf" name="person2[other][]"></li>
        </ul>
    </div><script type="text/javascript">/*&lt;![CDATA[*/ 
            $(document).ready(function() {
            $("#medical_info_2_dummy").find("input").each(function() {
                $(this).click(function() {
                    handleMedical(2, $(this));
                });
            });
        }); /*]]&gt;*/</script></fieldset>

I’m trying to copy the person2_dummy element, remove all _dummy id’s and insert it after another element on the page. Like so:

    var number = 2;
var after = $('#person1'); // <-- 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);

But, nothing happens when I try this. Any clues on what I’m doing wrong?

Answer 1

Ah, crap.

I’m going to blame my colleague for adding a dodgy version of a tooltip plugin. The code worked on jFiddle so it had to be something on the rest of the page. Although it wasn’t throwing errors, the component messed up this javascript. Grr.

So, I removed the plugin (qTip btw) and everything was working like a charm!
Thanks a lot for the thoughts guys.