I have this code (snippet). If you type your name, it will add it below automatically.
If you click "Add member" and type a name inside the appended input, it appears below too (on its respective "Hello, ...")
If you do it again, this time won't work, because the jscode only applies to the first appended elements.
My question is: how do I apply this jscode with with a third or fourth member, and so on?
PS. Another question: how do I make it unable to remove the first input text (so it is required to have at least 1 member)?
var name1 = document.getElementById('first');
name1.addEventListener('input', function() {
var result = document.querySelector('span.one');
result.innerHTML = this.value;
});
$('.add').click(function() {
$('.block:last').after('<div class="block"><input type="text" id="X"><span class="remove">Remove member</span><br><br></div>');
$('.hello:last').after('<div class="hello">Hello, <span class="name"></span><br><br></div>');
var name1 = document.getElementById('X');
name1.addEventListener('input', function() {
var result = document.querySelector('span.name');
result.innerHTML = this.value;
});
});
$('.optionBox').on('click', '.remove', function() {
$(this).parent().remove();
$('.hello:last').remove();
});
.block {
display: block;
}
input {
width: 50%;
display: inline-block;
}
span.add, span.remove {
display: inline-block;
cursor: pointer;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="optionBox">
<div class="block">
<span class="add">Add member</span>
<br><br>
</div>
<div class="block">
<input type="text" id="first"> <span class="remove">Remove member</span><br><br>
</div>
</div>
<div class="newmember">
</div>
<br>
<div class="hello">
Hello, <span class="one"></span><br><br>
</div>
I have done a bit of workout for you. Please check it. I think this is what you are looking for. I am adding same id and class attr for the input and the div to display the content.
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div class ="' + x + '" ><input type="text" class= "' + x + '" name="mytext[]"/>Remove</div>'); //add input box
$('.hello:last').after('<div class="hello" id = "' + x + '" >Hello, <span class="name"></span><br><br></div>');
$('input').on('input', function(e) {
divtoappend = $(this).attr('class');
var val = "";
var val = $(this).val();
var sel = "#" + divtoappend + " span";
$(sel).text('');
$(sel).append(val);
});
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
var rem = $(this).parents('div').attr('class');
$('#' + rem).remove();
$(this).parent('div').remove();
x--;
});
});
.block {
display: block;
}
input {
width: 50%;
display: inline-block;
margin : 4px;
}
span.add, span.remove {
display: inline-block;
cursor: pointer;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" class="1" name="mytext[]"></div>
</div>
<div class="hello" id="1">
Hello, <span class="1"></span><br><br>
</div>
Ok, I think we're all over-thinking this:
<div>
<button id="uxAddMember" class="btn btn-primary">Add Member</button>
</div>
<div class="container">
<div class="row" data-id="1">
<div class="form-control">
<input type="text" class="name" id="name" /> <span style="padding-left: 10px;"><button class="btn btn-warning">Remove Member</button>
</div>
</div>
</div>
<div>
<span id="uxHello"></span>
</div>
<script type="text/javascript">
$(document).ready(function() {
var rows = 1;
$('#uxAddMember').click(function() {
$('.container').append($('.row').attr('data-id', rows).html());
rows++;
});
});
$(document).on('keyup', '.name', function() {
$('#uxHello').html("Hello, " + $(this).val());
});
</script>
That doesn't include your removal functionality, but it takes care of the name output and adding new rows.
Related
this is my script to add input fields dynamically, in this part, the max of fields is 10.
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
var form_colis = '<div><input type="text" placeholder="Poids" name="poids[]"/> <input type="text" placeholder="Longueur" name="longueurs[]"/> <input type="text" placeholder="Largeur" name="largeurs[]"/> <input type="text" placeholder="Hauteur" name="hauteurs[]"/>Delete</div>';
//$(wrapper).append('<div><input type="text" name="mytext[]"/>Delete</div>'); //add input box
$(wrapper).append(form_colis); //add input box
} else {
alert('You Reached the limits')
}
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
<button class="add_form_field">Add New Field
<span style="font-size:16px; font-weight:bold;">+ </span>
</button>
<div>
<input type="text" placeholder="Poids" name="poids[]">
<input type="text" placeholder="Longueur" name="longueurs[]">
<input type="text" placeholder="Largeur" name="largeurs[]">
<input type="text" placeholder="Hauteur" name="hauteurs[]">
</div>
</div>
Now, I want to add fields in function of the sum of previous fields name. eg. for fields name poids[], if the sum is higher than 100, the user can't add fieldset, else, he can.
I hope that you understand what I mean.
thank you in advance
Here is a version that will calculate. I made the code shorter too - please note the CSS changes and the added class to item div
I assume you only want to test that poids > 100 ?
$(function() {
var max_fields = 10;
var $wrapper = $(".container1");
var add_button = $(".add_form_field");
$(add_button).click(function(e) {
e.preventDefault();
const vals = $("> .item input[name^=poids]",$wrapper).map(function() { return +this.value }).get()
const val = vals.length === 0 ? 0 : vals.reduce((a, b) => a + b);
if ($("> .item",$wrapper).length < max_fields && val < 100) {
const $form_colis = $(".item").first().clone();
$form_colis.find("input").val("");
$wrapper.append($form_colis); //add input box
} else {
alert('You Reached the limits')
}
});
$wrapper.on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
})
});
.container1 .item:first-of-type .delete {
display: none;
}
.delete { text-decoration: none; color: red; }
.add_form_field { white-space: nowrap; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="add_form_field">Add New Field ✚</button>
<div class="container1">
<div class="item">
<input type="text" placeholder="Poids" name="poids[]">
<input type="text" placeholder="Longueur" name="longueurs[]">
<input type="text" placeholder="Largeur" name="largeurs[]">
<input type="text" placeholder="Hauteur" name="hauteurs[]">
Delete
</div>
</div>
If I understood your problem correctly, then check this solution, modified by me. If the sum of all fields is exactly less than 100, then new fields are added, otherwise they are not added. Was it necessary?
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
$('.inputs:last-of-type').each(function(){
var sum_inputs = 0;
$(this).find('input').each(function(){
sum_inputs += parseInt($(this).val());
});
if (x < max_fields && sum_inputs < '100') {
x++;
var form_colis = '<div class="inputs"><input type="text" placeholder="Poids" name="poids[]"/> <input type="text" placeholder="Longueur" name="longueurs[]"/> <input type="text" placeholder="Largeur" name="largeurs[]"/> <input type="text" placeholder="Hauteur" name="hauteurs[]"/>Delete</div>';
//$(wrapper).append('<div><input type="text" name="mytext[]"/>Delete</div>'); //add input box
$(wrapper).append(form_colis); //add input box
} else {
alert('You Reached the limits')
}
});
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
<button class="add_form_field">Add New Field
<span style="font-size:16px; font-weight:bold;">+ </span>
</button>
<div class="inputs">
<input type="text" placeholder="Poids" name="poids[]">
<input type="text" placeholder="Longueur" name="longueurs[]">
<input type="text" placeholder="Largeur" name="largeurs[]">
<input type="text" placeholder="Hauteur" name="hauteurs[]">
</div>
</div>
I use clone() and remove() with div elements. witch make div element clone .
In this div element i have filed
$('.wrapper').on('click', '.remove', function() {
$(this).closest('.wrapper').find('.element:not(:first):last').remove();
setCloneButtonVisibility();
});
var cloneLimit = 12;
$('.wrapper').on('click', '.clone', function() {
if ($('.results .element').length <= cloneLimit) { // just to make testing easier
$(this).closest('.wrapper').find('.element:first').clone().appendTo('.results');
}
setCloneButtonVisibility();
});
function setCloneButtonVisibility() {
$('.wrapper .clone').toggle($('.results .element').length < cloneLimit);
}
$('.2').val('');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="element">
<input name="text" type="text" />
</div>
<div class="results"></div>
<div class="buttons">
<button class="clone">clone</button>
<button class="remove">remove</button>
</div>
</div>
when i click clone it clones text filed.
But if i have typed text in filed and then i make clone in clone filed is same text witch i have in first filed. how make that every new clone field was cleard
Find input elements and set their value to empty.
$('.wrapper').on('click', '.remove', function() {
$(this).closest('.wrapper').find('.element:not(:first):last').remove();
setCloneButtonVisibility();
});
var cloneLimit = 12;
$('.wrapper').on('click', '.clone', function() {
if ($('.results .element').length <= cloneLimit) { // just to make testing easier
$(this).closest('.wrapper').find('.element:first').clone()
// end() reverts last filtering operation
.find(':input').val('').end().appendTo('.results');
}
setCloneButtonVisibility();
});
function setCloneButtonVisibility() {
$('.wrapper .clone').toggle($('.results .element').length < cloneLimit);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="element">
<input name="text[]" type="text" />
<!-- For demonstration of the :input pseudoselector -->
<select name="sel[]">
<option value="" />
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="results"></div>
<div class="buttons">
<button class="clone">clone</button>
<button class="remove">remove</button>
</div>
</div>
References:
.end()
:input
how about set the value to null?
$('.wrapper').on('click', '.clone', function() {
if ($('.results .element').length <= cloneLimit) { // just to make testing easier
var input = $(this).closest('.wrapper').find('.element:first').clone().find("input").val("");
input.appendTo('.results');
}
setCloneButtonVisibility();
});
var cloneLimit = 10;
var inputName = function makeid() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 5; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
// handle click and add class
$('.remove').on("click", function(){
$(this).parents('.wrapper').find('.results .element:eq(-1)').remove();
});
$('.clone').on("click", function(){
var $clone = $(this).parents('.wrapper').find('.element:first').clone();
$clone.find('input').attr('name',inputName());
$clone.appendTo('.results');
});
$('.wrapper button').on('click', function(){
if( $('.results .element').length < cloneLimit) {
$('.clone').show();
}
else {
$('.clone').hide();
}
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
input {
margin-bottom: 20px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="element">
<input name="text" type="text" />
</div>
<div class="results"></div>
<div class="buttons">
<button class="clone">clone</button>
<button class="remove">remove</button>
</div>
</div>
i have made clone and remove button may be this is what you need..
see image here
Now if I click the button(+), new buttons are added below the main button. I would like the added buttons(-) to be located above the main button(+). plus button should always be under the last position
JavaScript:
$(document).ready(function() {
var max_fields = 50; //maximum input boxes allowed
var wrapper = $(".ilosc-wrapper"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
function addFunc() {
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append
('<div>' +
'<div class="clearfix"><' +
'div style="float:left; margin-right: 20px;" class="ilosc">' +
'<p class="ilosc_text"><spring:message code="b2b.JRmainContent_mainContentProduct.quantity"/>:</p>' +
' <input style="margin-top:3px;" type="number" min="1" class="productAmount" onchange="triggerValidation(false)" value="1">' +
'</div>' +
'<div style="float:left;" class="ilosc">' +
'<p class="ilosc_text">' +
'<spring:message code="b2b.JRmainContent_mainContentProduct.width"/>[m]' +
':</p> <input type="number" min="${length}" class="productLength" onchange="triggerValidation(false)" value="0">' +
'<a style="margin-bottom: 2px; margin-left: 20px; padding: 4px 12px;" href="#" class="remove_field btn btn-danger" >-</a>' +
'</div>' +
'</div>'+
'<div class="lengthValid" style="padding: 5px; margin-right: 84px; display:none;">' +
'<p id="par" style="color:red;"></p>' +
'</div>' +
'</div>');
}
};
var x = 1; //initlal text box count
$("body").on("click", '.add_field_button', function(e){ //on add input button click
e.preventDefault();
addFunc();
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault();
$(this).parent().parent().remove(); x--;
})
});
</script>
CODE:
<div id="glownydiv">
<div style="float:left; margin-right: 20px;" class="ilosc" id="iloscV">
<p class="ilosc_text">
<spring:message code="b2b.JRmainContent_mainContentProduct.quantity"/>:
</p>
<input type="number" min="1" class="productAmount" value="1">
</div>
<div style="float:left;" class="length-div" id="dlugoscV">
<p>
<spring:message code="b2b.JRmainContent_mainContentProduct.width"/>[m]:
</p>
<fmt:parseNumber parseLocale="pl" var="length" value="0"> </fmt:parseNumber>
<input type="number" min="${length }" class="productLength" value="${length}">
</div>
</div>
Hello I'm trying to rest the ID attribute of a set of text boxes when the delete button is pressed.
What I want to do is that when the delete button is pressed read the existing textboxes and rest there id's because when I delete items the ID's of the existing once keep the old ID values I want to rest this to match the error number value.
Working jsFiddle
//Add and remove function for the error text boxes
$(document).ready(function() {
$(document).on('click', '.addRow', function() {
var div = $("<div />"),
btnId = $("#stValue").val(); //Breaks the number from the ID using .match
// btnId = $(this).data("bid").match(/\d+/);//Breaks the number from the ID using .match
div.html(copy()); //Creates a new div container
$('.error-Column').append(div); //Insert all the HTML into the new div
$('#addRow_' + btnId).prop("disabled", true); //Disables the add button once clicked.
resetErrorNo(); //Calls the reset function
});
//Remove the text filed from the list and resets the error number
$(document).on('click', '.delRow', function() {
if (confirm('Your sure you want to remove this?')) {
var btnId = $("#stValue").val(), //Read the value of stValue
btnId2 = btnId - 1; //Deduct 1 from the value to get the last ID
for (var i = 0; i < btnId; i++) {
$('.addRow').attr('id', 'addRow_' + i);
}
//Enables the 1st add button if the value equals 1
if (btnId2 === 1) {
$('#addRow_' + btnId2).prop('disabled', false);
} else {
$('#addRow_' + btnId).prop('disabled', false);
}
$(this).parent().remove(); //Remove the text row from the list.
resetErrorNo(); //Calls the reset function
}
});
});
//Reset the entire error count number index
function resetErrorNo() {
$(".errorCount").each(function(index, _this) {
$(this).val(index + 1);
$("#stValue").val(index + 1);
});
}
//HTML function which will be called by the button click event for the add button
function copy() {
var stNum = document.getElementById("stValue"),
genNum = (document.getElementById("stValue").value - 1) + 2;
// stNum.value = genNum;
// language=HTML
return '<input class="errorCount" size="1" value="' + genNum + '" style="margin-left: 2%" readonly/>\n' +
'<select class="errorName" style="margin-left: 6%">\n' +
'<option selected disabled>----- Select Error -----</option>\n' +
'</select>\n' +
'<input type="button" class="addRow" id="addRow_' + genNum + '" data-bid="addRow_' + genNum + '" value="Add" />\n' +
'<input type="button" class="delRow" id="delRow_' + genNum + '" data-bid="delRow_' + genNum + '" value="Delete"/><br />'
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jType-container">
<div id="error-Add-Container">
<div id="error-Column-Headings">
Error Number<span style="margin-left: 8%">Error Name</span>
</div>
<div class="error-Column">
<input class="errorCount" size="1" value="1" style="margin-left: 2%" />
<input type="hidden" value="1" id="stValue" />
<select class="errorName" style="margin-left: 6%">
<option selected disabled>----- Select Error -----</option>
</select>
<input type="button" data-bid="addRow_1" id="addRow_1" class="addRow" value="Add" />
</div>
</div>
</div>
UPDATE: I used the answer given by #Rory McCrossan and made some tweaks to get I wanted and ended up with the below code which is what I wanted to do in the first place.
// Add and remove function for the error text boxes
$(document).ready(function() {
$(document).on('click', '.addRow', function() {
var $clone = $('.error-Column .error-container:first').clone().appendTo('.error-Column');
$clone.find('select').val('');
// $clone.find('input').val('');
$('.addRow').prop('disabled', true).filter(':last').prop('disabled', false);
resetErrorNo();
}).on('click', '.delRow', function() {
var $btn = $(this);
if (confirm('Your sure you want to remove this?')) {
$btn.closest('.error-container').remove();
$('.addRow').prop('disabled', true).filter(':last').prop('disabled', false);
resetErrorNo();
}
});
});
//Reset the entire error count number index
function resetErrorNo() {
$(".errorCount").each(function(index, _this) {
$(this).val(index + 1);
});
}
/*----- All the styling for the error input area start -----*/
#error-Column-Headings span {
margin-left: 8%;
}
.errorCount {
margin-left: 2%;
}
.errorName {
margin-left: 6%;
}
.error-Column .error-container:nth-child(1) .delRow {
display: none;
}
.error-Column .error-container:nth-child(1) .delRow {
display: none;
}
/*----- All the styling for the error input area end -----*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jType-container">
<div id="error-Add-Container">
<div id="error-Column-Headings">
Error Number<span>Error Name</span>
</div>
<div class="error-Column">
<div class="error-container">
<input class="errorCount" size="1" value="1" style="margin-left: 2%" />
<select class="errorName">
<option selected disabled value="">----- Select Error -----</option>
</select>
<input type="button" class="addRow" value="Add" />
<input type="button" class="delRow" value="Delete" />
</div>
</div>
</div>
hope this helps some one in the future.
Incremental id attributes are an anti-pattern which leads to a lot of unnecessary maintenance work - as you've discovered.
You can make your code much more DRY, not to mention more simple by simply cloning each row and using DOM traversal to find elements related to the buttons and add/delete them as needed. Try this:
//Add and remove function for the error text boxes
$(document).ready(function() {
$(document).on('click', '.addRow', function() {
var $clone = $('.error-Column .error-container:first').clone().appendTo('.error-Column');
$clone.find('select').val('');
$('.addRow').prop('disabled', true).filter(':last').prop('disabled', false);
}).on('click', '.delRow', function() {
var $btn = $(this);
if (confirm('Your sure you want to remove this?')) {
$btn.closest('.error-container').remove();
$('.addRow').prop('disabled', true).filter(':last').prop('disabled', false);
}
});
});
#error-Column-Headings span {
margin-left: 8%;
}
.errorCount {
margin-left: 2%;
}
.errorName {
margin-left: 6%;
}
.error-Column .error-container:nth-child(1) .delRow {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jType-container">
<div id="error-Add-Container">
<div id="error-Column-Headings">
Error Number <span>Error Name</span>
</div>
<div class="error-Column">
<div class="error-container">
<select class="errorName">
<option selected disabled value="">----- Select Error -----</option>
</select>
<input type="button" class="addRow" value="Add" />
<input type="button" class="delRow" value="Delete" />
</div>
</div>
</div>
</div>
I am using - and + buttons to change the number of the text box, I am having troubles dealing with different text fields, here is my code:
var unit = 0;
var total;
// if user changes value in field
$('.field').change(function() {
unit = this.value;
});
$('.add').click(function() {
unit++;
var $input = $(this).prevUntil('.sub');
$input.val(unit);
unit = unit;
});
$('.sub').click(function() {
if (unit > 0) {
unit--;
var $input = $(this).nextUntil('.add');
$input.val(unit);
}
});
button {
margin: 4px;
cursor: pointer;
}
input {
text-align: center;
width: 40px;
margin: 4px;
color: salmon;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id=field1>
field 1
<button type="button" id="sub" class=sub>-</button>
<input type="text" id="1" value=0 class=field>
<button type="button" id="add" class=add>+</button>
</div>
<div id=field2>
field 2
<button type="button" id="sub2" class=sub>-</button>
<input type="text" id="2" value=0 class=field>
<button type="button" id="add2" class=add>+</button>
</div>
And here's the DEMO
You can see in the demo that the values change correctly only if you click buttons on the same field, but if you alternate between fields the values don't change properly.
This should be all you need:
$('.add').click(function () {
$(this).prev().val(+$(this).prev().val() + 1);
});
$('.sub').click(function () {
if ($(this).next().val() > 0) $(this).next().val(+$(this).next().val() - 1);
});
By using the unit variable you were tying both inputs together. And the plus in +$(this) is a shorthand way to take the string value from the input and convert it to a number.
jsFiddle example
You're using the same variable to hold the values of your two inputs. One simple option would be to use two variables instead of one:
var unit_1 = 0;
$('#add1').click(function() {
unit_1++;
var $input = $(this).prev();
$input.val(unit_1);
});
/* Same idea for sub1 */
var unit_2 = 0;
$('#add2').click(function() {
unit_2++;
var $input = $(this).prev();
$input.val(unit_2);
});
/* Same idea for sub2 */
and unit = unit just assigns the value of unit to itself, so that's no very useful and you can certainly leave it out.
An alternative approach is to use data attributes and have each element store its own value. Edit: it already stores its own value. Just access it.
var total;
// if user changes value in field
$('.field').change(function() {
// maybe update the total here?
}).trigger('change');
$('.add').click(function() {
var target = $('.field', this.parentNode)[0];
target.value = +target.value + 1;
});
$('.sub').click(function() {
var target = $('.field', this.parentNode)[0];
if (target.value > 0) {
target.value = +target.value - 1;
}
});
button {
margin: 4px;
cursor: pointer;
}
input {
text-align: center;
width: 40px;
margin: 4px;
color: salmon;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id=field1>
field 1
<button type="button" id="sub" class=sub>-</button>
<input type="text" id="1" value=0 class=field>
<button type="button" id="add" class=add>+</button>
</div>
<div id=field2>
field 2
<button type="button" id="sub2" class=sub>-</button>
<input type="text" id="2" value=0 class=field>
<button type="button" id="add2" class=add>+</button>
</div>