Add multiple html element dynamically using jquery

Question

I want to add multiple html elements dynamically on button click and get values of each. Also one can delete created element on button click. HTML elements will be textbox and other text box for phone number.

I've tried to create single text box on button click. Fiddle: https://jsfiddle.net/dvkeojqn/

HTML:

<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
 <!--Textboxes will be added here -->
</div>
<br />
<input id="btnGet" type="button" value="Get Values" />

JS:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
 $("#btnAdd").bind("click", function () {
 var div = $("<div />");
 div.html(GetDynamicTextBox(""));
 $("#TextBoxContainer").append(div);
 });
 $("#btnGet").bind("click", function () {
 var values = "";
 $("input[name=DynamicTextBox]").each(function () {
 values += $(this).val() + "\n";
 });
 alert(values);
 });
 $("body").on("click", ".remove", function () {
 $(this).closest("div").remove();
 });
});
function GetDynamicTextBox(value) {
 return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;' +
 '<input type="button" value="Remove" class="remove" />'
}
</script>

• Arun P Johny: looks just fine - jsfiddle.net/arunpjohny/61fawqp2/1 - what is the problem
• Bhushan Kawadkar: it is working, what is the issue?
• Nehil Mistry: I want to add multiple textboxes on button click. Currently only one is created

Answer 1

try replacing this function..

$(function () {
 $("#btnAdd").bind("click", function () {
 var div = $("<div />");
 div.html(GetDynamicTextBox(""));
 $("#TextBoxContainer").append(div);
 });
 $("#btnGet").bind("click", function () {
 var valuesarr = new Array(); 
 var phonearr = new Array(); 
 $("input[name=DynamicTextBox]").each(function () {
 valuesarr.push($(this).val());
 });
 $("input[name=phoneNum]").each(function () {
 phonearr.push($(this).val());
 });
 alert(valuesarr); alert(phonearr);
 });
 $("body").on("click", ".remove", function () {
 $(this).closest("div").remove();
 });
});
function GetDynamicTextBox(value) {
 return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;<input name = "phoneNum" type="text" />&nbsp;<input type="button" value="Remove" class="remove" />';
}

and HERE is the FIDDLE.

Answer 2

Try to replace this JavaScript code..

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
 $("#btnAdd").bind("click", function () {
 var div = $("<div />");
 div.html(GetDynamicTextBox(""));
 $("#TextBoxContainer").append(div);
 });
 $("#btnGet").bind("click", function () {
 var values = "";
 $("input[name=DynamicTextBox]").each(function () {
 values += $(this).val() + "\n";
 });
 alert(values);
 });
 $("body").on("click", ".remove", function () {
 $(this).closest("div").remove();
 });
});
function GetDynamicTextBox(value) {
 return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;<input name = "DynamicTextBox" type="text" value="'+ value +'" />&nbsp;<input type="button" value="Remove" class="remove" />';
}
</script>