Change input name incrementally upon appending in jquery

Question

Have the following jQuery:

$(document).ready(function() {

        var counter = 1;
        var maxAppend = 0;

        $("#addItem").click(function() {
            if (maxAppend >= 10) return;
                var task = $('#searchresults').val();
                var src = $('#searchresults').find(":selected").attr('data-src');

                var $newLi = $("<li><div1><img src='" + src + "'/></div1><div2><input type='text' id='college' name='college' value='" + task + "'/></div2><button class='up'>&#x2191</button><button class='down'>&#x2193</button></li>")
                    $newLi.attr("id", "newLi" + counter++);
            maxAppend++;
                    $("#tasks").append($newLi);
                });

I understand how to dynamically change the id of "li", however, the input within the $newLi variable is throwing me off. I tried setting the input to its own variable, but did not get too far.

In the end, i'd like to get the 'college' input name to become 'college1' upon button click, then 'college2' on the next click - - just like I have done with 'li' element.

Please let me know if I you need further clarification. Thanks.

Why don't you use your counter variable in place of id="college"? — max
– max, Commented May 16, 2017 at 0:53

Rick Calder · Accepted Answer · 2017-05-16 01:22:36Z

1

Just use your counter variable and insert it into the actual HTML markup the way you are the task variable

var $newLi = $("<li><div1><img src='" + src + "'/></div1><div2><input type='text' id='college" + counter + "' name='college" + counter + "' value='" + task + "'/></div2><button class='up'>&#x2191</button><button class='down'>&#x2193</button></li>")

answered May 16, 2017 at 1:22

Rick Calder

18.8k3 gold badges27 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Philibin Over a year ago

beautiful. so simple!

Collectives™ on Stack Overflow

Change input name incrementally upon appending in jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related