dynamically add input fields with different id

Question

I've to add in my page -dynamically- a input range like this:

<div id="input_div">
<input type="button" value="-"  onclick="minus()">
<input name="order" type="number" min="0" max="30" size="10" range="1" value="1" id="count1">
<input type="button" value="+" onclick="plus()">
</div>
<div id="wrapper"></div>
<a href="#" id="add-inputs">ADD</a>

And i've to add and remove numbers of that input.

For example the first input has id=count1, if I click on the "plus" button it has to increment its value. But if i had another input with id=count2 and i click on the "plus" button it has to increment the value of the second input with id=count2 and it shouldn't change the first input with id=count1. And then I don't know how to add and remove inputs. So two questions:

• How to add many inputs (the inputs held in the div with id=input_div) with different ids;
• How to do with the first question done, to increment and de-increment (with the button plus and minus) the value of the current input with its id generated automatically (different from the others)... and how to remove it.

Thank you

Answer 1

EDIT: I have add the input type number... And I hope that it's what do you want..

here you are an example: http://jsfiddle.net/ryGqZ/

$('#addScnt').click(function() {
                $('<p><label for="p_scnts"><input type="text" id="p_scnt_' + i +'" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);

I don't know why you want add two buttons: "+" and "-". I obtain this with input type number and safari:

Answer 2

You need add an attribute to minus & plus inputs like as "btnId". and access to it's number with this attribute. See code:

$(document).ready(function () {
    for (i = 1; i <= 10; i++) {
        $("#input_div").append('<input btnId="count' + i.toString() + '" type="button" value="-"  onclick="minus()">');
        $("#input_div").append('<input  id="count' + i.toString() + '" name="order" type="number" min="0" max="30" size="10" range="1" value="1">');
    }
});

function minus() {
    var btnName = $(this).attr("btnId");
    var btn = $("#" + btnName);
    ...
}

Answer 3

You need create your html with java script or JQuery. For example the following code create 10 input element in input_div container.:

    $(document).ready(function () {
        for (i = 1; i <= 10; i++) {
            $("#input_div").append('<input  id="count' + i.toString() + '" name="order" type="number" min="0" max="30" size="10" range="1" value="1">');
        }
    });