[jQuery] Re: Very confused!

[goodieboy]

OK, turns out I am crazy, but thanks to html and javascript. So,
depending on the arrangement of the default ".productOption" div, I
either get the behavior you all have described, or the behavior I have
described. Below, if '.productOption' is after the
'#newProductOptions' div, the number doesn't increment. If it's before
'#newProductOptions', wallah!. Wow, a whole 2 days of me rubbing my
forehead raw, and a room booming full of, "wtf f?!?" :-) I'm happy
now.

Try it and see what happens:

<%= javascript_include_tag('jquery') %>

<script>
JQ = $;

var OINDEX=1000;

JQ(function(){

        JQ('#addProductOption a').click(function(){
                addProductOption();
                return false;
        });

        function addProductOption(){
                var tpl = JQ('.productOption:first').clone(true);
                JQ(tpl).find('[EMAIL PROTECTED]').each(function(){
                        var n = JQ(this).attr('name');
                        var new_name = n.replace(/\[\d?\]/, '[' + OINDEX + ']');
                        JQ(this).attr('value', new_name);
                        JQ(this).attr('name', new_name);
                });
                OINDEX++;
                JQ('#newProductOptions').append(tpl);
                tpl.show();
        }

});
</script>

<div id="addProductOption"><a href="#">add</a></div>

<div id="newProductOptions">

</div>

<!-- down here, OINDEX doesn't increment inside of the "each"
handler... move this div above newProductOptions to get the correct
behavior -->
<div class="productOption">
        <input name="product_options[][name]" type="text" value="" />
</div>