JavaScript Form Cloning

Question

I am trying to clone simple "directors / members" form. When I hit "add member button" it clones everything the form, but it does not erases zip code field. Also, when I submit the form it does not submit the first two fields of the cloned forms. It takes values of first name and last name and assigns it to address and city and so on... So, to summarize it does not send two fields, and I think it's state and zip fields of cloned forms that give me troubles, but I can't see why.

$y=0; $clone=1; do{  ?>
    <div id="<?php echo "clonedSection$clone"; ?>" class="clonedSection" >
        <p style="margin-left:350px; font-size: 14px;"><label id="<?php echo "member_label$clone"; ?>"  >  <?php echo "Director / Member $clone"; ?></label> </p><br><br>
                <p style="margin-left:370px;">First name<input style="margin: 2px; margin-left: 5px; margin-right: 5px;" type="text" name="<?php echo "member_firstname$clone"; ?>" id="<?php echo "member_firstname$clone"; ?>" value="<?php echo $split_members[$y][0];?>"> <span class="error"> <?php echo $member_errors[$y]["member_first_name"];?></span> </p>
                <p style="margin-left:373px; ">Last name<input style="margin: 2px;  margin-left: 5px; margin-right: 5px;" type="text" name="<?php echo "member_lastname$clone"; ?>" id="<?php echo "member_lastname$clone"; ?>" value="<?php echo $split_members[$y][1];?>"> <span class="error"> <?php echo $member_errors[$y]["member_last_name"];?></span> </p>
                <p style="margin-left:350px; ">Street address<input style="margin: 2px;  margin-left: 5px; margin-right: 5px;" type="text" name="<?php echo "member_address$clone"; ?>" id="<?php echo "member_address$clone"; ?>" value="<?php echo $split_members[$y][2];?>"> <span class="error"> <?php echo $member_errors[$y]["member_address"];?></span> </p>
                <p style="margin-left:405px; ">City <input style="margin: 2px;  margin-left: 5px; margin-right: 5px;" type="text" name="<?php echo "member_city$clone"; ?>" id="<?php echo "member_city$clone"; ?>" value="<?php echo $split_members[$y][3];?>"> <span class="error"> <?php echo $member_errors[$y]["member_city"];?></span> </p>
                <p style="margin-left:402px;">State<select style="margin: 2px;  margin-left: 5px; margin-right: 5px;" name="<?php echo "member_state$clone"; ?>" id ="<?php echo "member_state$clone"; ?>">
                    <?php //$states = listStates(statesList());
                    foreach($states as $value){
                        echo '<option >'.$value.'</option>';
                    }  echo '<option selected>'.$split_members[$y][4].'</option>'; ?>
                </select> <span class="error"> <?php echo $member_errors[$y]["member_state"];?></span> </p>
                <p style="margin-left:384px;">ZIP code<input style="margin: 2px;  margin-left: 5px; margin-right: 5px;" type="text" name="<?php echo "member_zip$clone"; ?>" id="<?php echo "member_zip$clone"; ?>" value="<?php echo $split_members[$y][5];?>"> <span class="error"> <?php echo $member_errors[$y]["member_zip"];?></span> </p>

            </div>
        <?php $y++; $clone++; } while ($y < count($split_members)); ?> 

And I use the following javascript:

$(document).ready(function() {
    $("#btnAdd").click(function() {
        $("#btnDel").prop("disabled",false);

        var num = $(".clonedSection").length;
        var newNum  = new Number(num + 1);

        var newSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);

        newSection.children(":nth-child(1)").children(":first").attr("id", "member_label" + newNum);
        newSection.children(":nth-child(2)").children(":first").attr("name", "member_firstname" + newNum).attr("id", "member_firstname" + newNum).attr("value", "");
        newSection.children(":nth-child(3)").children(":first").attr("name", "member_lastname" + newNum).attr("id", "member_lastname" + newNum).attr("value", "");
        newSection.children(":nth-child(4)").children(":first").attr("name", "member_address" + newNum).attr("id", "member_address" + newNum).attr("value", "");
        newSection.children(":nth-child(5)").children(":first").attr("name", "member_city" + newNum).attr("id", "member_city" + newNum).attr("value", "");
        newSection.children(":nth-child(6)").children(":first").attr("name", "member_state" + newNum).attr("id", "member_state" + newNum).attr("value", "");
        newSection.children(":nth-child(7)").children(":first").attr("name", "member_zip" + newNum).attr("id", "member_zip" + newNum).attr("value", "");


        $(".clonedSection").last().append(newSection);

        elem = document.getElementById('member_label' + newNum);
        elem.innerHTML = "Director / Member " + newNum;

            if (newNum == 12)
                $("#btnAdd").prop("disabled",true);
    });

    $("#btnDel").click(function() {
        var num = $(".clonedSection").length; // how many "duplicatable" input fields we currently have

        $("#clonedSection" + num).remove();     // remove the last element
        // enable the "add" button
        $("#btnAdd").prop("disabled",false);

        // if only one element remains, disable the "remove" button
        if (num-1 == 1)
        $("#btnDel").prop("disabled",true);

    });

    //$("#btnDel").attr("disabled","disabled");
    $("#btnDel").prop("disabled",true);
    var count = $(".clonedSection").length;
    if (count > 1)
    $("#btnDel").prop("disabled",false);
    //$("#btnDel").disabled = false;

});

Answer 1

You're making it way more complex than needed.

If you have an input <input name="example[0]" /> and clone that, and try to make it <input name="example[1]" /> with weird increments and such, just use the array version:

<input name="example[]" value="My key will be 0" />
<input name="example[]" value="My key will be 1" />
<input name="example[]" value="My key will be 2" />

To use this again in php:

foreach($_POST['example'] as $key =>$value){
    echo $key.': '.$value.'<br />';
    echo $key.': '.$_POST['anotherName'][$key]; // (example for another variable)
}

As you can see, a lot less complicated and much easier to read and maintain. This way you can clone your form without having to worry about which number it is, you can easily loop through them.
If you aren't used to this, I still recommend to try this, maybe only in a small test setup. Controlling arrayed forms is a skill with a lot of value.