jquery incrementing number in html name=""

I want the variable inputname to go up by 1 every time a new <input /> is added

e.g.

<input name="1" />

<input name="2" />

<input name="3" />

---html---

<p class="add">Add</p>
<div class="added"></div>

---jQuery/javascript---

$(document).ready(function() {
    $("p.add").click(function() {


        var inputname = somevar;
        var added = "<input type=\"text\" name=\""+inputname+"\" />";
        $("div.added").append(added);
    });
});

&nbs开发者_运维问答p;

here it is on jsfiddle.net if it helps -> http://jsfiddle.net/gamepreneur/54kzw/

Set inputname like this:

var inputname = $('.added input').length + 1;

This gets the total number of added inputs and increments by one, resulting in the new name.

Change the variable scope

Use this:

// declare your variable here so it exists throughout every call, instead of being
// delcared new with every call.
var inputname = somevar;

$(document).ready(function() {
    $("p.add").click(function() {
        var added = "<input type=\"text\" name=\""+(inputname++)+"\" />";
        $("div.added").append(added);
    });
});

Alternatives:

• Grab the number of inputs ($('div.added input').length) and use that for a counter.
• Grab the id of the last item $('div.added input:last').prop('name')) and increment it.

You need to declare inputname in the global scope so that it lasts longer than just the duration of the click function and then you need to increment it each time you use it.

I modified your fiddle to this: http://jsfiddle.net/jfriend00/54kzw/2/

var inputname = 1;
$(document).ready(function() {
    $("p.add").click(function() {
        var added = "<input type='text' name='" + inputname++ + "' />";
        $("div.added").append(added);
    });
});

Try

$(document).ready(function() {
    $("p.add").click(function() {
        var inputname = $('input', $("div.added")).length + 1;
        var added = "<input type=\"text\" name=\"" + inputname + "\" />";
        $("div.added").append(added);
    });
});

Consider adding some other selectors to choose those inputs (like a class selector)