How can I create a javascript JSON (?) object based on two input fields per row, with 48 rows?
I have this:
<div><input name = "name" /></div> <div><input name = "rating" /></div>
<div><input name = "name" /></div> <div><input name = "rating" /></div>
<div><input name = "name" /></div> <div><input name = "rating" /></div>
...
...
I then want to sort the object on rating (desc). Can this be done?
Would this help?
var pl=[['Jack',1],['Jill',2],['Lucy',3],['Marc',4],['John',5],['Eva',6],['Anne',7],['Ben',8]];
divs=$('div[id^=NAME]');
pl.forEach(function(v,i){divs[i].innerHTML=v[0]+' (rank: '+v[1]+')';})
div {display: inline-block; width:120px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="NAME-1"></div> vs. <div id="NAME-2"></div><br/>
<div id="NAME-3"></div> vs. <div id="NAME-4"></div><br/>
<div id="NAME-5"></div> vs. <div id="NAME-6"></div><br/>
<div id="NAME-7"></div> vs. <div id="NAME-8"></div><br/>
<div id="NAME-9"></div> vs. <div id="NAME-10"></div><br/>
<div id="NAME-11"></div> vs. <div id="NAME-12"></div><br/>
<div id="NAME-13"></div> vs. <div id="NAME-14"></div><br/>
<div id="NAME-15"></div> vs. <div id="NAME-16"></div><br/>
<div id="NAME-17"></div> vs. <div id="NAME-18"></div><br/>
<div id="NAME-19"></div> vs. <div id="NAME-20"></div><br/>
<div id="NAME-21"></div> vs. <div id="NAME-22"></div><br/>
<div id="NAME-23"></div> vs. <div id="NAME-24"></div><br/>
<div id="NAME-25"></div> vs. <div id="NAME-26"></div>
pl is your sorted array of arrays and divs is a jquery object containing your target divs you want to put the values in. Maybe they can all be found in an enclosing container? In that case you can use a different selector for finding them.
Edit: (answer to edited question)
To collect the data from your input fields you could do the following:
$(function(){
var i,str='';
for (var i=1;i<11;i++)
str+='<input type="text" name="n'+i+'" placeholder="Name '+i+'"/> '
+'<input type="text" name="r'+i+'" placeholder="Rating '+i+'"/><br/>';
$('#frm1').prepend(str);
$('#go').click(go);
})
function go(){
var name, jsn=$.makeArray($('input','#frm1').map(function(i,o){
var v=$(o).val(); if (i%2 && v>0) return [[name,v]]; else name=v;}));
jsn.sort(function(a,b){ return a[1]-b[1];});
$('#result').text(JSON.stringify(jsn));
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frm1"><button id="go">go</button></form>
<pre id="result"></pre>
You can try my way:
Put all row to 1 form with unique name per input.
Get form data via jquery.
Use my formObj2Json() function convert form data to json with key per item is input unique name.
$(function(){
$(document).on('click', '#grap', function(){
var formData = $('#anph').serializeArray(),
rs = formObj2Json(formData);
$('#rs').html(JSON.stringify(rs, undefined, 2));
});
})
function formObj2Json(formArray) { //serialize data function
var returnArray = {};
for (var i = 0, len = formArray.length; i < len; i++)
returnArray[formArray[i].name] = formArray[i].value;
return returnArray;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Knockout 1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button id="grap">grap</button>
<form id="anph">
<div class="group"><input name="name1" /><input name="rating1" /></div>
<div class="group"><input name="name2" /><input name="rating2" /></div>
<div class="group"><input name="name3" /><input name="rating3" /></div>
<div class="group"><input name="name4" /><input name="rating4" /></div>
<div class="group"><input name="name5" /><input name="rating5" /></div>
<div class="group"><input name="name6" /><input name="rating6" /></div>
<div class="group"><input name="name7" /><input name="rating7" /></div>
<div class="group"><input name="name8" /><input name="rating8" /></div>
<div class="group"><input name="name9" /><input name="rating9" /></div>
<div class="group"><input name="name10" /><input name="rating10" /></div>
</form>
<pre id="rs"></pre>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var players = [{ name: "Paul", rank: 1}, {name: "Michael", rank: 2}];
$.each(players, function(key, value){
$("#containerofPlayers").append('<div id="' + value.name + '">' + value.name + ' is ranked ' + value.rank + '</div>');
});
});
</script>
What's happening is that you have an array of objects. You loop through each object within the array to get its data. You then create and append a new div with the values to the <div id="containerofPlayers"></div> element.
Hope this helps.
Edit: If you don't want to create the <div> elements in jQuery but simply assign the text, you could do this instead:
$('#'+value.name).text(value.name + " is ranked " + value.rank);
Edited answer:
Since you've changed your original question,
<div><input name="name" /></div> <div><input name = "rating" /></div>
do something more like ↓
<div id="players">
<div class="player">
<label>Name: </label><input class="playerName" type="text"/>
<label>Rank: </label><input class="playerRank" type="number"/>
</div>
<div class="player">
<label>Name: </label><input class="playerName" type="text"/>
<label>Rank: </label><input class="playerRank" type="number"/>
</div>
</div>
then in jQuery
$(function() {
var players = []; //create an Array
$("#players .player").each(function(i, obj){
var playerName = $(this).children('.playerName').val();
var playerRank = $(this).children('.playerRank').val();
$(this).push({"name": playerName, "rank": playerRank}); // this will give you an array of objects like in my previous answer, then you can use that data to display it.
});
players.sort(function(a, b) {
return (a.rank - b.rank) || a.name.localeCompare(b.name);
});
$.each(players, function(index, value){
$("#result").append('<div id="' + value.name + '">' + value.name + ' is ranked ' + value.rank + '</div>');
})
});
Related
This is run automatic. i need it run when call window.onload, not run before call window.onload, because i want to create function as a template code to embed other side, just change id, or className input
Thanks
function changeResultBox(resultTextClassName,inputSearchToggleId){
var inputSearchToggle=document.getElementById(inputSearchToggleId),
resultText=document.getElementsByClassName(resultTextClassName);
resultText[0].innerHTML='"'+inputSearchToggle.value+'"';
resultText[1].innerHTML='"'+inputSearchToggle.value+'"';
}
window.onload=function(){
document.getElementById('Store-Page-Search-Input').onkeyup =
changeResultBox('search-bar-item__text','Store-Page-Search-Input');
}
<input type="text" id="Store-Page-Search-Input" class="search-bar__input" name="txtsearchbar" placeholder="Find product, find shop,..." autocomplete="off" value=""/>
<div class="search-bar-item">
<div class="search-bar-item__title">find product </div>
<div class="search-bar-item__text"></div>
</div>
<div class="search-bar-item">
<div class="search-bar-item__title">find shop </div>
<div class="search-bar-item__text"></div>
</div>
Bind event on the input itself onkeyup="changeResultBox('search-bar-item__text','Store-Page-Search-Input')".
<input type="text" id="Store-Page-Search-Input" class="search-bar__input" name="txtsearchbar" placeholder="Find product, find shop,..." autocomplete="off" value="" onkeyup="changeResultBox('search-bar-item__text','Store-Page-Search-Input')" />
function changeResultBox(resultTextClassName, inputSearchToggleId) {
var inputSearchToggle = document.getElementById(inputSearchToggleId),
resultText = document.getElementsByClassName(resultTextClassName);
resultText[0].innerHTML = '"' + inputSearchToggle.value + '"';
resultText[1].innerHTML = '"' + inputSearchToggle.value + '"';
}
<input type="text" id="Store-Page-Search-Input" class="search-bar__input" name="txtsearchbar" placeholder="Find product, find shop,..." autocomplete="off" value="" onkeyup="changeResultBox('search-bar-item__text','Store-Page-Search-Input')" />
<div class="search-bar-item">
<div class="search-bar-item__title">find product </div>
<div class="search-bar-item__text"></div>
</div>
<div class="search-bar-item">
<div class="search-bar-item__title">find shop </div>
<div class="search-bar-item__text"></div>
</div>
function changeResultBox(resultTextClassName, inputSearchToggleId) {
//var resultTextClassName = 'search-bar-item__text';
//var inputSearchToggleId = 'Store-Page-Search-Input';
var inputSearchToggle = document.getElementById(inputSearchToggleId),
resultText = document.getElementsByClassName(resultTextClassName);
resultText[0].innerHTML = '"' + inputSearchToggle.value + '"';
resultText[1].innerHTML = '"' + inputSearchToggle.value + '"';
}
window.onload = function() {
document.getElementById("Store-Page-Search-Input").addEventListener("keyup", changeResultBox.bind(event, 'search-bar-item__text', 'Store-Page-Search-Input'));
}
<input type="text" id="Store-Page-Search-Input" class="search-bar__input" name="txtsearchbar" placeholder="Find product, find shop,..." autocomplete="off" value="" />
<div class="search-bar-item">
<div class="search-bar-item__title">find product </div>
<div class="search-bar-item__text"></div>
</div>
<div class="search-bar-item">
<div class="search-bar-item__title">find shop </div>
<div class="search-bar-item__text"></div>
</div>
I have the an html code which resembles this:
<div id="abc">
<div class="class1">some data</div>
<div class="class2">
<input type="number" id="row1-id1" />
<input type=number" id="row1-id2" />
</div>
<div class="class2">
<input type="number" id="row2-id1" />
<input type=number" id="row2-id2" />
</div>
</div>
I want to read all input tag and create a list from it. The input tag needs to be inside the div with class class2 which in turn should be under #abc.
I have written the following code to read them.
var rows = document.getElementById('abc').getElementsByClassName('class2');
for (var i=0;i<rows.length;i++) {
var id1 = rows[i].getElementById('row'+(i+1)+'-id1);
var id2 = rows[i].getElementById('row'+(i+1)+'-id2);
.......
.......
}
Now when i try to do the above i get an error saying 'getElementById is not a function'.
How do i access the element with specific Id inside the node?
First of fix the mistakes in your code. Your missing 2 " in your html, and 2 ' in your javascript.
Second, then use querySelector like: rows[i].querySelector('#row' + (i + 1) + '-id1'). Then your code works fine.
Demo
var rows = document.getElementById('abc').getElementsByClassName('class2');
for (var i = 0; i < rows.length; i++) {
var id1 = rows[i].querySelector('#row' + (i + 1) + '-id1');
var id2 = rows[i].querySelector('#row' + (i + 1) + '-id2');
console.log(id1)
}
<div id="abc">
<div class="class1">some data</div>
<div class="class2">
<input type="number" id="row1-id1" />
<input type="number" id="row1-id2" />
</div>
<div class="class2">
<input type="number" id="row2-id1" />
<input type="number" id="row2-id2" />
</div>
</div>
Please Note that since Id's should be unique, then you can always just use var id1 = document.getElementById('row' + (i + 1) + '-id1');
The requirement is to dynamically add each li element as and when user click on "add row" button". And when User enters any value in field1, an ajax call with this value as parameter is made to server and the return value is set in the next 2 fields.
In focus lost method, when I try to retrieve the user entered value, the input field value is always returned as EMPTY or the default value which I set in the source code and not the user modified value.
The row ids are given unique like f1_edit_row1, f1_edit_row2 etc. Please let me know on why I dont get the value.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script src="js/jquery-1.12.4.js"></script>
<title>Insert title here</title>
</head>
<body>
<ul id="Rows_Edit">
<li id="EditRow1">
<div class="row">
<div class="col-md-3 Field1">
<span>Field1</span><input type="text" class="form-control field1"
id="f1_edit_row1" onfocusout="focusLost_edit('1')" name="field1"
placeholder="1234">
</div>
<div class="col-md-3 Field2">
<span>Field2</span><input type="text" class="form-control"
id="f2_edit_row1" name="field2" placeholder="123"
disabled="disabled">
</div>
<div class="col-md-5 name">
<input type="text" class="form-control" id="field3_edit_row1"
placeholder="ABC" disabled="disabled">
</div>
<div class="col-md-1 icons" id="btn_row1">
<input type="button" class="addbtn" id="btn_row1" name="Add" value="Add Row" onclick="addButtonClick()">
<!-- <i class="fa fa-plus-square" id="btn1_edit" aria-hidden="true"></i> -->
</div>
</div>
</li>
</ul>
<div></div>
<div></div>
<div></div>
<div class="updatebutton">
<input type="submit" id='submit-button_edit' class="btn btn-default" value="Update" onclick="updateBtnClick()">
</div>
<div class="cancelbutton">
<input type="button" id='cancel-button_edit' class="btn btn-default" value="Cancel">
</div>
</body>
</html>
<script type="text/javascript">
function focusLost_edit(rowNo){
var id = "f1_edit_row" + rowNo;
var value = document.getElementById(id).value;
console.log(id, " Value:[", value, "]");
// API Code here
var returnvalue = "TEST";
var id1 = "#f2_edit_row" + rowNo;
$(id1).val(returnvalue);
console.log(id1, " Return Value:[", returnvalue, "]");
var returnvalue1 = "TESTING";
var id2 = "#field3_edit_row" + rowNo;
$(id2).val(returnvalue1);
console.log(id2, " Return Value1:[", returnvalue1, "]");
}
function addButtonClick(){
console.log("Add Button Click");
// Code to add rows here
}
function updateBtnClick(){
console.log("Update Button Click");
$('ul#Rows_Edit li').each(function() {
var id = $(this).attr('id');
var rowNo = id.substring(7);
var id1 = "#f1_edit_row" + rowNo;
var value1 = $(id1).val();
var id2 = "#f2_edit_row" + rowNo;
var value2 = $(id2).val();
var id3 = "#field3_edit_row" + rowNo;
var value3 = $(id3).val();
console.log("Value1:[", value1, "] Value2:[", value2, "]Value3:[", value3), "]";
});
// Code to send value to server here
}
</script>
Use this in your function call.
function focusLost_edit(rowNo){
var id = "f1_edit_row" + rowNo;
var value = document.getElementById(id).value;
console.log(id, " Value:[", value, "]");
// API Code here
var returnvalue = "TEST";
var id1 = "#f2_edit_row" + rowNo;
$(id1).val(returnvalue);
console.log(id1, " Return Value:[", returnvalue, "]");
var returnvalue1 = value;
var id2 = "#field3_edit_row" + rowNo;
$(id2).val(returnvalue1);
console.log(id2, " Return Value1:[", returnvalue1, "]");
}
function addButtonClick(){
console.log("Add Button Click");
// Code to add rows here
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="shipToRows_Edit">
<li id="EditRow1">
<div class="row">
<div class="col-md-3 Field1">
<span>Field1</span><input type="text" class="form-control field1"
id="f1_edit_row1" onfocusout="focusLost_edit('1')" name="field1"
placeholder="1234">
</div>
<div class="col-md-3 Field2">
<span>Field2</span><input type="text" class="form-control"
id="f2_edit_row1" name="field2" placeholder="123"
disabled="disabled">
</div>
<div class="col-md-5 name">
<input type="text" class="form-control" id="field3_edit_row1"
placeholder="ABC" disabled="disabled">
</div>
<div class="col-md-1 icons" id="btn_row1">
<input type="button" class="addbtn" id="btn_row1" name="Add" value="Add Row" onclick="addButtonClick()">
<!-- <i class="fa fa-plus-square" id="btn1_edit" aria-hidden="true"></i> -->
</div>
</div>
</li>
</ul>
I want to make a book catalog with JQuery to add books to a author. In the code That I have I am trying to add a author and have his books be in a array with his number only. Separated by other authors and their own arrays of books.
For example, when I press the button to add a author a input box appears so that I can add the authors name also a button to add a book that when I press that button I get an input box to add a books name.
When I press the add author again I want to be able to add another author with the same input boxes as before (adding more books to that author).
Also to add multiple books assigned to that author.
I have already done this in the pics but I get an array of everything. I want it to be separated by author.
author1 has an array of {book1, book2, book3...}
author2 has an array of {book13, book14, book15}
(i'm a beginner at JQuery)
This is the code that I have so far:
<!DOCTYPE html>
<html>
<head>
<title>Add or Remove text boxes with jQuery</title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Add or Remove text boxes with jQuery</h1>
<div class="my-form">
<form role="form" method="post">
<p class="all_fields">
<button class="add_author">Add Author</button>
<div id="commonPart" class="commonPart">
<label for="author1">Author <span class="author-number">1</span></label>
<br/>
<input type="text" name="author" value="" id="author1" />
<br/>
<button class="add_book">Add book</button>
<div>
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function($){
var wrapper = $(".all_fields"); //Fields wrapper
var commonPart = $("#commonPart");
var add_author = $(".add_author"); //Add button ID
var add_subButton = $(".add_book"); //Add sub button ID
$('.my-form .add-box').click(function(){
var n = $('.all_fields').length + 1;
if( 15 < n ) {
alert('Stop it!');
return false;
}
$(add_author).click(function(e){
e.preventDefault();
var htmlToAdd = $('<label for="author' + n + '">Author <span class="author-number">' + n + '</span></label><br/><input type="text" name="author' + n + '" value="" id="author' + n + '" /><br/><button class="add_book">Add book</button><a class="add-book" href="#">Add Book</a><div><input type="text" class="bookName" name="authBook' + n + '[]"/></div>');
htmlToAdd.hide();
$('.my-form p.all_fields:last').after(htmlToAdd);
box_html.fadeIn('slow');
return false;
});
$(add_book).click(function(e){
e.preventDefault();
var htmlToAdd = $('<div><input type="text" class="bookName" name="authBook' + n + '[]"/></div>');
htmlToAdd.hide();
$('.my-form p.all_fields:last').after(htmlToAdd);
box_html.fadeIn('slow');
return false;
});
$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
</body>
</html>
updated code(fixed some bugs..), try this....
<!DOCTYPE html>
<html>
<head>
<title>Add or Remove text boxes with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Add or Remove text boxes with jQuery</h1>
<div class="my-form">
<button onclick="addAuthor()" >Add Author</button><br><br>
<div id="addAuth"></div>
<br><br>
<button onclick="submit()" >Submit</button>
</div>
<div id="result" ></div>
</div>
<script type="text/javascript">
var authors = 0;
function addAuthor(){
authors++;
var str = '<div id="auth'+authors+'"><input type="text" name="author" id="author'+authors+'" />'
+'<button onclick="addMore(\'auth'+authors+'\')" >Add Book</button>'
+'</div>';
$("#addAuth").append(str);
}
var count=0;
function addMore(id){
count++;
var str = '<div id="bookDiv'+count+'">'
+'<input class="'+id+'" type="text" name="book'+id+'" />'
+'<span onclick="addMore(\''+id+'\')" style="font-size: 20px; background-color: green; cursor:pointer;">+</span>'
+'<span onclick="removeDiv(\'bookDiv'+count+'\')" style="font-size: 20px; background-color: red; cursor:pointer; margin-left:1%;">-</span>'
+'</div>';
$("#"+id).append(str);
}
function removeDiv(id){
var val = confirm("Are you sure ..?");
if(val){
$("#"+id).slideUp(function(){$("#"+id).remove();});
}
}
function submit(){
var arr = [];
for(i=1; i<=authors; i++){
var obj = {};
obj.name = $("#author"+i).val();
obj.books = [];
$(".auth"+i).each(function(){
var data = $(this).val();
obj.books.push(data);
});
arr.push(obj);
}
$("#result").html(JSON.stringify(arr));
}
</script>
</body>
</html>
Please try this code and include jquery min js :
<div class="my-form">
<form role="form" method="post">
<p class="all_fields">
<div id="commonPart" class="commonPart">
<label for="author1">Author <span class="author-number"></span></label>
<input type="text" name="author" value="" id="author1" />
<br/>
<div>
<label for="author1">book <span class="author-number"></span></label>
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
<button type="button" class="add_author" onclick="AddCustomMOre();">Add More</button>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
<script> function AddCustomMOre(){
$(".all_fields ").append('<div id="commonPart" class="commonPart"><label for="author1">Author <span class="author-number"></span></label> <input type="text" name="author" value="" id="author1" /> <br/> <div><label for="author1">book <span class="author-number"></span></label> <input type="text" class="bookName" name="authBook[]"/></div> Remove</div>');
} </script>
You can try this....
<p class="all_fields">
<button class="add_author">Add Author</button>
<div class="commonPart">
<label for="author1">Author <span class="author-number">1</span></label>
<br/>
<input type="text" name="author1" value="" id="author1" />
<br/>
<button div-id="1" class="add_book">Add book</button>
<div id="books1">
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
</p>
<script>
var c=1;
$(".add_author").on("click",function(){
c++;
$(".all_fields").append('<div class="commonPart"><label for="author'+c+'">Author <span class="author-number">'+c+'</span></label><br/><input type="text" name="author'+c+'" value="" id="author'+c+'" /><br/><button class="add_book" div-id="'+c+'">Add book</button><div id="books'+c+'"><input type="text" class="bookName" name="authBook[]"/></div></div>');
});
$(".add_book").on("click",function(){
var id=$(this).attr("div-id");
$("#books"+id).append('<input type="text" class="bookName" name="authBook[]"/>');
});
</script>
When the clone button is clicked, size and length fields should be cloned and placed below. Crucial point is, I should be able to see these cloned mark-up code when I check the browser source code because I'll submit all fields.
HTML
<style>
div { display:inline-block; }
.needles, .yarns, .options { border:1px solid #14A; padding:10px; }
</style>
<div class='needles'>
<p>NEEDLES</p>
<div class='options'>
<div class='label'>Size</div>
<div class='field'>
<input id='size-0' name='size-0' value='Size' />
</div>
</div>
<br />
<div class='options'>
<div class='label'>Length</div>
<div class='field'>
<input id='length-0' name='length-0' value='Length' />
</div>
</div>
<br /><br />
<button>Clone</button>
</div>
<br />
<div class='yarns'>
<p>YARNS</p>
<div class='options'>
<div class='label'>Size</div>
<div class='field'>
<input id='size-0' name='size-0' value='Size' />
</div>
</div>
<br />
<div class='options'>
<div class='label'>Length</div>
<div class='field'>
<input id='length-0' name='length-0' value='Length' />
</div>
</div>
<br /><br />
<button>Clone</button>
</div>
I did something like this but I think it is a mess to be honest.
$("button").click(function(event) {
event.preventDefault();
var $parent = $(this).closest('div');
var $length = $parent.prev();
var $size = $length.prev();
var size = $size.clone(false).wrap('<p>').parent().html();
var length = $length.clone(false).wrap('<p>').parent().html();
var spanId = $(size).children('span').attr('id');
var idArray = spanId.split("__");
var currentIdentifierNo = idArray[idArray.length-2];
var newIdentifierNo = parseInt(currentIdentifierNo)+1;
var currentIdentifier = '__' + currentIdentifierNo + '__';
var newIdentifier = '__' + newIdentifierNo + '__';
var re = new RegExp(currentIdentifier, 'g');
size = size.replace(re, newIdentifier);
length = length.replace(re, newIdentifier);
var html = size + length;
$(this).before(html);
});
You have to change the name attribute for this to work:
length.find('input').attr('name', 'length-1');
size.find('input').attr('name', 'size-1');
If you send the same key / value pairs in the form, the server doesn't know which is which.