Duplicate Form Fields

Question

I have some code that I'm using to allow the user to add products. They can control the number of products added, as well as delete products they've created. My problem is that with the code I'm using, I've only managed to be able to change the id of the second div as well as the name/id of the first input. How can I change the names of all the inputs, not just the first input?

The javascript:

<script type="text/javascript">
    $(document).ready(function() {
        $('#add').click(function() {
            var num     = $('.clonedInput').length;
            var newNum  = new Number(num + 1);

            var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

            newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);

            $('#input' + num).after(newElem);
            $('#remove').attr('disabled','');
        });

        $('#remove').click(function() {
            var num = $('.clonedInput').length;

            $('#input' + num).remove();
            $('#add').attr('disabled','');

            if (num-1 == 1)
                $('#remove').attr('disabled','disabled');
        });

        $('#remove').attr('disabled','disabled');
    });
</script>

The form:

<form id="myForm">
    <div id="input1" class="clonedInput">
        <p>Product Name: <input type="text" name="name1" id="name1" /></p>
        <p>Product Description:</p>
        <textarea rows="10" cols="50" name="desc1" id="desc1"></textarea>
        <p>Brand Name: <input type="text" name="brand1" id="brand1" /></p>
        <p>Product Code Number: <input type="text" name="code1" id="code1" /></p>
        <p>West Texas Co-op Bid Product Number (if different from the Product Code Number): <input type="text" name="coop1" id="coop1" /></p>
        <p>Commodity processing availability:</p>
        <p><input type="checkbox" name="yes" id="yes1" value="Yes"> Yes <input type="checkbox" name="no" id="no1" value="No"> No</p>
        <p>If yes, what is the commodity processing code number?: <input type="text" name="comm1" id="comm1" /></p>
    </div>

    <div>
        <input type="button" id="add" value="Add Product" />
        <input type="button" id="remove" value="Remove Product" />
    </div>
</form>

Live example: http://test.joshrodg.com/wp-content/themes/rodgersconsulting/test.php

Answer 1

I figured it out...I was able to tweak what I found here: http://jsfiddle.net/e6cwd/9/

The JQuery:
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>

The JavaScript:

<script type="text/javascript">
    $(document).ready(function() {
        $("#btnAdd").click(function() {
            var num     = $(".clonedSection").length;
            var newNum  = new Number(num + 1);

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

            newSection.children(":first").children(":first").attr("id", "name" + newNum).attr("name", "name" + newNum);
            newSection.children(":nth-child(3)").children(":first").attr("id", "desc" + newNum).attr("name", "desc" + newNum);
            newSection.children(":nth-child(4)").children(":first").attr("id", "brand" + newNum).attr("name", "brand" + newNum);
            newSection.children(":nth-child(5)").children(":first").attr("id", "code" + newNum).attr("name", "code" + newNum);
            newSection.children(":nth-child(6)").children(":first").attr("id", "coop" + newNum).attr("name", "coop" + newNum);
            newSection.children(":nth-child(7)").children(":first").attr("id", "yes" + newNum).attr("name", "yes" + newNum);
            newSection.children(":nth-child(7)").children(":nth-child(2)").attr("id", "no" + newNum).attr("name", "no" + newNum);
            newSection.children(":nth-child(8)").children(":first").attr("id", "comm" + newNum).attr("name", "comm" + newNum);

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

            $("#btnDel").attr("disabled","");

            if (newNum == 5)
                $("#btnAdd").attr("disabled","disabled");
        });

        $("#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").attr("disabled","");

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

        $("#btnDel").attr("disabled","disabled");
    });
</script>

The HTML:

<form id="myForm">
    <div id="clonedSection1" class="clonedSection">
        <p>Name: <input type="text" name="name" id="name" /></p>
        <p>Product Description:</p>
        <p><textarea rows="10" cols="50" name="desc" id="desc"></textarea></p>
        <p>Brand Name: <input type="text" name="brand" id="brand" /></p>
        <p>Product Code Number: <input type="text" name="code" id="code" /></p>
        <p>West Texas Co-op Bid Product Number (if different from the Product Code Number): <input type="text" name="coop" id="coop" /></p>
        <p>Commodity processing availability: <input type="checkbox" name="yes" id="yes" value="Yes"> Yes <input type="checkbox" name="no" id="no" value="No"> No</p>
        <p>Commodity processing code number (if applicable): <input type="text" name="comm" id="comm" /></p>
    </div>
    <div>
        <input type="button" id="btnAdd" value="add another name" />
        <input type="button" id="btnDel" value="remove name" />
    </div>
</form>