jQuery each function not working need to replace each attribute

Question

I have this html

<form method="POST" action="" id="order" class="forms">
    <div>
        <span class="col1">Ref.</span>
        <span class="col2">Number</span>
        <span class="col3">Color</span>
        <span class="col4">Remarks</span>
        <span class="col5">Prijs</span>
    </div>
    <div class="order">
        <input type="text" name="ref-1" class="col1" />
        <input type="text" name="num-1" class="col2" />
        <input type="text" name="color-1" class="col3" />
        <input type="text" name="remark-1" class="col4" />
        <input type="text" name="price-1" class="col5" />
    </div>
    <a id="add" href="#">+</a>
</form>

And this jquery

$("#add").click(function() {     
    $("#order").children(":eq(1)").clone().each(function() {
            var index = $("#order").children().length - 1;
            alert(index);

        $(this).children().find(":input").each(function() {

                alert(index);

                    $(this).attr("[name]", function(i, v) {

                        return v.substr(0, v.lastIndexOf("-") + 1) + index;

                    }).val("");

                });
    }).insertBefore("#add");
});

I need to replace the -1 part of each input name to the incremented value. But the js never gets to the $(this).attr() function When I run this code it doesn't show the second alert box when I click #add

Answer 1

I haven't checked the whole of your code but there is a glaring error in that

.attr("[name]"

should be

.attr("name"

---

You also need to remove the .children() from the line

$(this).children().find(":input")

and make it

$(this).find(":input")

This is because this refers to the div element that contains the inputs. By running .children() on that it returns the input elements, and by doing find() on that it returns nothing, because find looks inside the selected elements, not-including the elements it runs on.

updated jsfiddle at http://jsfiddle.net/gaby/TpmdP/