Example duplicate inputs
HTML
<div class="input_container">
<span>Some Input</span><br/>
<textarea class="duplicate_input"></textarea><br/>
<input type='button' class="duplicate_button" value='Duplicate'/>
</div>
<input type='button' id='showInput' value='Show Input Array' />
<div id="example">
Input Array:
</div>
CSS
#example{
position:absolute;
top:0px;
right:0px;
background:red;
color:white;
height:600px;
width:300px;
}
#showInput {
position:absolute;
top: 0px;
right: 400px;
}
JavaScript
bindInputs();
$("#showInput").click(getInputArr);
function bindInputs()
{
$(".duplicate_button").on("click", function(){
var _button = $(this);
var _parent = _button.parent();
_parent.after(_parent.clone());
bindInputs();
});
}
var _inputValues = [];
function getInputArr()
{
var _inputs = $(".duplicate_input");
var _exampleDIVHTML = "Input Array: <br/><br/> ";
for(var i = 0; i < _inputs.length; i++)
{
var _input = _inputs[i];
console.log(_input.value);
_inputValues[i] = _input.value;
_exampleDIVHTML+="Input #"+i+": "+_inputValues[i]+"<br/>";
//do rest of logic here.
}
$("#example").html(_exampleDIVHTML);
}