Addition On javascript Not working when new row is added - javascript

var str ="";
var counter=0;
$(document).ready(function() {
$(".amount, .penalty").change(function() {
var total = 0;
var amount = parseInt($(".amount").val()) || 0;
console.log("amount: "+amount);
var penalty = parseInt($(".penalty").val()) || 0;
console.log("penalty: "+penalty);
total = amount + penalty;
console.log(total);
$("#total").html(total);
});
$(".add").click(function() {
alert();
str +="<div class='form-group row' >"
+"<label class='col-xs-3 col-form-label mr-2'>Reason</label>"
+"<div class='col-xs-9'>"
+ "<input type='text' class='form-control' id='reason"+counter+"' name='reason'>"
+"</div>"
+"<label class='col-xs-3 col-form-label mr-2'>Amount</label>"
+"<div class='col-xs-9'>"
+ "<input type='text' class='form-control amount' id='amount"+counter+"' name='amount'>"
+"</div>"
+ "<label class='col-xs-3 col-form-label mr-2'>Penalty</label>"
+"<div class='col-xs-9'>"
+"<input type='text' class='form-control penalty' id='penalty"+counter+"' name='penalty'>"
+"</div>"
+ "<div class='col-xs-9'>"
+ "<button type='button' class='add'>+</button>"
+ "<button type='button' class='remove'>-</button>"
+ "</div>"
+ "</div>";
counter++;
$("#customsAdd").append(str);
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- <select class="form-control col-md-6">
<option value="1">Customs</option>
<option value="2">VAT</option>
<option value="3">Excise</option>
<option value="4">Others</option>
</select>-->
<!--div for customs!-->
<div class="form-group row" id="forCustoms">
<label class="col-xs-3 col-form-label mr-2">Reason</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="reason" name="reason">
</div>
<label class="col-xs-3 col-form-label mr-2">Amount</label>
<div class="col-xs-9">
<input type="text" class="form-control amount" id="amount" name="amount">
</div>
<label class="col-xs-3 col-form-label mr-2">Penalty</label>
<div class="col-xs-9">
<input type="text" class="form-control penalty" id="penalty" name="penalty">
</div>
<div class="col-xs-9">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<!--div for customs! ends-->
<div id="customsAdd"></div>
<div class="col-md-12">
Total :
<p id="total"></p>
</div>
</div>
</body>
</html>
The total "4" is coming only of first row and upto that my program is correct but when I add the new row then the total is not changing and new row is not added on after clicking "+" button.How to bring new row on "+" button press and change in total?The total is not changing after entering data in 2nd row and "+" is not working.


You have to use .on() for the event to work on dynamically created element. This will allow the event to work on the elements those are added to the body at a later time.
Change:
$(".add").click(function() {
To
$(".container").on("click", ".add", function() {
You can use .map() and reduce() to calculate the total. Try the following way:
var str = "";
var counter = 0;
var total = 0;
$(document).ready(function() {
$(".container").on("input", ".amount, .penalty", function() {
var tArr = $(".amount, .penalty").map(function(i,el){
return Number($(this).val());
}).get();
total = tArr.reduce((a,c) => a+c,0);
//console.log(total);
$("#total").html(total);
});
$(".container").on("click", ".add", function() {
str ="<div class='form-group row' >"
+"<label class='col-xs-3 col-form-label mr-2'>Reason</label>"
+"<div class='col-xs-9'>"
+ "<input type='text' class='form-control' id='reason"+counter+"' name='reason'>"
+"</div>"
+"<label class='col-xs-3 col-form-label mr-2'>Amount</label>"
+"<div class='col-xs-9'>"
+ "<input type='text' class='form-control amount' id='amount"+counter+"' name='amount'>"
+"</div>"
+ "<label class='col-xs-3 col-form-label mr-2'>Penalty</label>"
+"<div class='col-xs-9'>"
+"<input type='text' class='form-control penalty' id='penalty"+counter+"' name='penalty'>"
+"</div>"
+ "<div class='col-xs-9'>"
+ "<button type='button' class='add'>+</button>"
+ "<button type='button' class='remove'>-</button>"
+ "</div>"
+ "</div>";
counter++;
$("#customsAdd").append(str);
});
$(".container").on("click", ".remove", function() {
if($(".form-group.row").length > 1){ // remove only if there is more than one element
$(this).closest('.form-group.row').remove();
$(".amount, .penalty").trigger("input");
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<!-- <select class="form-control col-md-6">
<option value="1">Customs</option>
<option value="2">VAT</option>
<option value="3">Excise</option>
<option value="4">Others</option>
</select>-->
<!--div for customs!-->
<div class="form-group row" id="forCustoms">
<label class="col-xs-3 col-form-label mr-2">Reason</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="reason" name="reason">
</div>
<label class="col-xs-3 col-form-label mr-2">Amount</label>
<div class="col-xs-9">
<input type="text" class="form-control amount" id="amount" name="amount">
</div>
<label class="col-xs-3 col-form-label mr-2">Penalty</label>
<div class="col-xs-9">
<input type="text" class="form-control penalty" id="penalty" name="penalty">
</div>
<div class="col-xs-9">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<!--div for customs! ends-->
<div id="customsAdd"></div>
<div class="col-md-12">
Total :
<p id="total"></p>
</div>
</div>


Mamun is right, you need on.
We can make some other improvements too.
We can use your existing row as a template, so if you change your html, you may not need to change your javascript.
You also have a logic issue with your addition function, it won't currently get all fields.
var str ="";
var counter=0;
$(document).ready(function() {
//Use existing row as a template
var rowTemplate = $("#forCustoms").clone(true);
$(".container").on("change", ".amount, .penalty",function() {
var total = 0;
/*NOTE: Not sure what you want to actuall do here
This will always get the fist values, not values
for all
var amount = parseInt($(".amount").val()) || 0;
console.log("amount: "+amount);
var penalty = parseInt($(".penalty").val()) || 0;
console.log("penalty: "+penalty);
*/
/*To Total all values*/
var amount = 0;
var penalty = 0;
$(".form-group,.row").each(function(){
amount += parseInt($(this).find(".amount").val(),10) || 0;
penalty += parseInt($(this).find(".penalty").val(),10) || 0;
})
total = amount + penalty;
console.log(total);
$("#total").html(total);
});
$(".container").on("click" ,".add",function() {
alert();
//Clone our template
var t2 = rowTemplate.clone(true);
//Make Ids Unique
$(t2).attr("id", "row" + counter);
$(t2).find("[name=reason]").attr("id", "reason" + counter);
$(t2).find("[name=amount]").attr("id", "amount" + counter);
$(t2).find("[name=penalty]").attr("id", "penalty" + counter);
counter++;
$("#customsAdd").append(t2);
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- <select class="form-control col-md-6">
<option value="1">Customs</option>
<option value="2">VAT</option>
<option value="3">Excise</option>
<option value="4">Others</option>
</select>-->
<!--div for customs!-->
<div class="form-group row" id="forCustoms">
<label class="col-xs-3 col-form-label mr-2">Reason</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="reason" name="reason">
</div>
<label class="col-xs-3 col-form-label mr-2">Amount</label>
<div class="col-xs-9">
<input type="text" class="form-control amount" id="amount" name="amount">
</div>
<label class="col-xs-3 col-form-label mr-2">Penalty</label>
<div class="col-xs-9">
<input type="text" class="form-control penalty" id="penalty" name="penalty">
</div>
<div class="col-xs-9">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<!--div for customs! ends-->
<div id="customsAdd"></div>
<div class="col-md-12">
Total :
<p id="total"></p>
</div>
</div>
</body>
</html>

Related

JQuery Datetimepicker not working when loaded dynamically

Im having trouble getting the datetimepicker to load fully in the following:
it adds the elements to the page but clicking on the calendar icon does not function like the first set does.
Im new to web page building be gentle
Here is the jsfiddle: https://jsfiddle.net/gq8a7k14/
The first 2 datetimepickers work fine, when you click the add button, a new set is added but they dont work.
<?php
?>
<html>
<head>
<title>SubmitYourTime</title>
<link href='assets/css/phppot-style.css' type='text/css' rel='stylesheet' />
<link rel='stylesheet' type='text/css'
href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
datetimepicker/4.17.42/css/bootstrap-datetimepicker.min.css'>
<style type='text/css'>
.container {
margin-top: 40px;
}
.btn-primary {
width: 100%;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://momentjs.com/downloads/moment.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$( document ).ready(function() {
$('#datetimepicker0s').datetimepicker();
$('#datetimepicker0e').datetimepicker();
$('.add').on('click', add);
$('.remove').on('click', remove);
});
function add() {
var new_chq_no = parseInt($('#total_chq').val()) + 1;
$("#datetimepicker" + new_chq_no + "s").datetimepicker();
$("#datetimepicker" + new_chq_no + "e").datetimepicker();
var new_input = "<div class='row'> <div class='col-md-6'> <div class='form-group'> <label class='control-label'>Start Time</label> <div class='input-group date' name='dtp" + new_chq_no + "s' id='datetimepicker" + new_chq_no + "s'> <input type='text' class='form-control' /> <span class='input-group-addon'> <span class='glyphicon glyphicon-calendar'> </span> </span> </div> </div> </div> <div class='col-md-6'> <div class='form-group'> <label class='control-label'>End Time</label> <div class='input-group date' name='dtp" + new_chq_no + "e' id='datetimepicker" + new_chq_no + "e'> <input type='text' class='form-control' /> <span class='input-group-addon'> <span class='glyphicon glyphicon-calendar'></span> </span> </div> </div> </div> </div>";
$('#new_chq').append(new_input);
$('#total_chq').val(new_chq_no);
}
function remove() {
var last_chq_no = $('#total_chq').val();
if (last_chq_no > 1) {
$('#new_' + last_chq_no).remove();
$('#total_chq').val(last_chq_no - 1);
}
}
</script>
</head>
<body>
<div class='container'>
<div class='panel panel-primary'>
<div class='panel-heading'>Enter Your Time</div>
<div class='panel-body'>
<div id='new_chq'>
<div class='row'>
<div class='col-md-6'>
<div class='form-group'>
<label class='control-label'>Start Time</label>
<div class='input-group date' name='dtp0s' id='datetimepicker0s'>
<input type='text' class='form-control' />
<span class='input-group-addon'>
<span class='glyphicon glyphicon-calendar'></span>
</span>
</div>
</div>
</div>
<div class='col-md-6'>
<div class='form-group'>
<label class='control-label'>End Time</label>
<div class='input-group date' name='dtp0e' id='datetimepicker0e'>
<input type='text' class='form-control' />
<span class='input-group-addon'>
<span class='glyphicon glyphicon-calendar'></span>
</span>
</div>
</div>
</div>
</div>
</div>
<input type='hidden' value='1' id='total_chq'>
<button class='add'>Add Time</button>
<br></br>
<input type='submit' class='btn btn-primary' value='Submit'>
</div>
</div>
</body>
</html>

You need to initialize the datepicker() after it is appended to the page, currently when you attempt to initialize it the selector does not find anything.
modified fiddle
original
function add() {
var new_chq_no = parseInt($('#total_chq').val()) + 1;
$("#datetimepicker" + new_chq_no + "s").datetimepicker();
$("#datetimepicker" + new_chq_no + "e").datetimepicker();
var new_input = "<div class='row'> <div class='col-md-6'> <div class='form-group'> <label class='control-label'>Start Time</label> <div class='input-group date' name='dtp" + new_chq_no + "s' id='datetimepicker" + new_chq_no + "s'> <input type='text' class='form-control' /> <span class='input-group-addon'> <span class='glyphicon glyphicon-calendar'> </span> </span> </div> </div> </div> <div class='col-md-6'> <div class='form-group'> <label class='control-label'>End Time</label> <div class='input-group date' name='dtp" + new_chq_no + "e' id='datetimepicker" + new_chq_no + "e'> <input type='text' class='form-control' /> <span class='input-group-addon'> <span class='glyphicon glyphicon-calendar'></span> </span> </div> </div> </div> </div>";
$('#new_chq').append(new_input);
$('#total_chq').val(new_chq_no);
}
modified
function add() {
var new_chq_no = parseInt($('#total_chq').val()) + 1;
var new_input = "<div class='row'> <div class='col-md-6'> <div class='form-group'> <label class='control-label'>Start Time</label> <div class='input-group date' name='dtp" + new_chq_no + "s' id='datetimepicker" + new_chq_no + "s'> <input type='text' class='form-control' /> <span class='input-group-addon'> <span class='glyphicon glyphicon-calendar'> </span> </span> </div> </div> </div> <div class='col-md-6'> <div class='form-group'> <label class='control-label'>End Time</label> <div class='input-group date' name='dtp" + new_chq_no + "e' id='datetimepicker" + new_chq_no + "e'> <input type='text' class='form-control' /> <span class='input-group-addon'> <span class='glyphicon glyphicon-calendar'></span> </span> </div> </div> </div> </div>";
$('#new_chq').append(new_input);
$('#total_chq').val(new_chq_no);
$("#datetimepicker" + new_chq_no + "s").datetimepicker();
$("#datetimepicker" + new_chq_no + "e").datetimepicker();
}

How I can maintain the sequence of beneficiaries generated with jquery?

I'm developing a Will generating web application. For this I need to develop a system which allow the user to add multiple beneficiaries.
I have written some code which is working for creation on new beneficiary but the issue is when a user deletes a beneficiary the sequence number doesn't work accordingly.
For example, User added 5 beneficiaries and he deletes the 3rd beneficiary the sequence number doesn't change. i.e. beneficiary 1, beneficiary 2, beneficiary 4, beneficiary 5. I want to sort this problem make them in sequence.
For my code please check this
https://jsfiddle.net/shahzadwaris/purvo4bn/5/
$(document).delegate(".delBeneficiary", "click", function(e) {
e.preventDefault();
var div = $(this).attr("id");
var nmbr = div.replace(/\D/g, "");
$("." + div).remove();
bene--;
//alert(nmbr);
});
var bene = 2;
$(".addBeneficiary").click(function(e) {
e.preventDefault();
addBeneficiary(bene);
bene++;
});
$(document).delegate(".addBeneficiaryD", "click", function(e) {
e.preventDefault();
addBeneficiary(bene);
bene++;
});
function addBeneficiary(bene) {
$("#beneficiaries").append(
"<div class = 'bene" +
bene +
"'><h6 class = 'mt-3 mb-3'><b>Beneficiary <span class = 'bNmbr'>" +
bene +
"</span></b></h6>" +
"<div class='form-group row'>" +
"<label for='ename' class='col-sm-4 col-form-label backgroundForm pt-2 pb-2'><span class = 'pt-5'>Name</span><span class = 'text-danger'> *</span></label>" +
"<div class='col-sm-7'>" +
" <input type='text' class='form-control p-1 mt-1' id='ename' name = 'ebname[]' placeholder='Name'>" +
"</div>" +
"<label for='enric' class='col-sm-4 col-form-label backgroundForm pt-2 pb-2'><span class = 'pt-5'>NRIC / Passport No.</span><span class = 'text-danger'> *</span></label>" +
"<div class='col-sm-7'>" +
"<input type='text' class='form-control p-1 mt-1' id='enric' name = 'ebnric[]' placeholder='NRIC / Passport No'>" +
"</div> " +
"<label for='relationship' class='col-sm-4 col-form-label backgroundForm pt-2 pb-2'><span class = 'pt-5'>Relationship</span></label>" +
"<div class='col-sm-7'>" +
"<input type='text' class='form-control p-1 mt-1' id='Rrelationship' name = 'ebrelationship[]' placeholder='Relationship'>" +
"</div>" +
"<div class = 'col-xs-12 col-sm-12 col-md-11 mt-2 text-right'>" +
"<button class = 'btn btn-sm addBeneficiaryD ' id = 'bene" +
bene +
"' >Add</button>" +
"<button class = 'btn btn-sm delBeneficiary ml-2' id = 'bene" +
bene +
"'>Delete</button>" +
"</div>" +
"</div></div>"
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h6 class='mt-3 mb-3'><b>Beneficiary <span class = 'bNmbr'>1</span></b></h6>
<div class="form-group row">
<label for="ename" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>Name</span><span class = 'text-danger'> *</span></label>
<div class="col-sm-7">
<input type="text" class="form-control p-1 mt-1" id="ename" name='ebname[]' placeholder="Name" required='required' />
</div>
<label for="enric" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>NRIC / Passport No.</span><span class = 'text-danger'> *</span></label>
<div class="col-sm-7">
<input type="text" class="form-control p-1 mt-1" id="enric" name='ebnric[]' placeholder="NRIC / Passport No" required='required' />
</div>
<label for="relationship" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>Relationship</span></label>
<div class="col-sm-7">
<input type="text" class="form-control p-1 mt-1" id="Rrelationship" name='ebrelationship[]' placeholder="Relationship" required='required' />
</div>
<div class='col-xs-12 col-sm-10 col-md-8 mt-2 text-right'>
<button class='btn btn-sm addBeneficiary '>Add</button>
</div>
</div>
<div id='beneficiaries'>
</div>

You can start here
Much simpler code and removed the deprecated delegate
function renum() {
$(".beneficiary").each(function() {
$(this).find(".bNmbr").text($(this).index()+1)
})
}
$(".delBeneficiary").eq(0).hide()
$(document).on("click", ".delBeneficiary ", function(e) {
e.preventDefault();
$(this).closest(".beneficiary").remove();
renum();
});
$(document).on("click", ".addBeneficiary", function(e) {
e.preventDefault();
const beneCount = $(".beneficiary").length;
let $bene = $(this).closest(".beneficiary").clone();
$bene.find("input").each(function() { $(this).val("") }); // empty inputs
$bene.find("[id]").each(function() {
this.id += beneCount;
})
$bene.find(".bNmbr").text(beneCount + 1)
$bene.appendTo("#beneficiaries")
$(".delBeneficiary:gt(0)").show();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='beneficiaries'>
<div class="beneficiary">
<h6 class='mt-3 mb-3'><b>Beneficiary <span class = 'bNmbr'>1</span></b></h6>
<div class="form-group row">
<label for="ename" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>Name</span><span class = 'text-danger'> *</span></label>
<div class="col-sm-7">
<input type="text" class="form-control p-1 mt-1" id="ename" name='ebname[]' placeholder="Name" required='required' />
</div>
<label for="enric" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>NRIC / Passport No.</span><span class = 'text-danger'> *</span></label>
<div class="col-sm-7">
<input type="text" class="form-control p-1 mt-1" id="enric" name='ebnric[]' placeholder="NRIC / Passport No" required='required' />
</div>
<label for="relationship" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>Relationship</span></label>
<div class="col-sm-7">
<input type="text" class="form-control p-1 mt-1" id="Relationship" name='ebrelationship[]' placeholder="Relationship" required='required' />
</div>
<div class='col-xs-12 col-sm-10 col-md-8 mt-2 text-right'>
<button class='btn btn-sm addBeneficiary '>Add</button>
<button class='btn btn-sm delBeneficiary ml-2'>Delete</button>
</div>
</div>
</div>
</div>

Try renumbering your entries every time you add or delete:
function renumber() {
var i = 1;
$('.bNmbr').each(function(){
this.innerHTML = i;
++i;
});
}
Can be combined with the code by mplungjan.

This would be a complete code for you. I tried to make it easier for editing and removed duplicate ID creations:
var bene = 1;
function correctNumbers() {
$('.bNmbr').each(function(i) {
$(this).text(i + 1);
});
};
$('body').on('click', '.addBeneficiary', function(e) {
e.preventDefault();
bene++;
addBeneficiary(bene);
});
$('body').on('click', '.delBeneficiary', function(e) {
e.preventDefault();
$(this).closest('.bene').remove();
correctNumbers();
});
function addBeneficiary(bene) {
$("#beneficiaries").append('\
<div class="bene" id="bene' + bene + '">\
<h6 class="mt-3 mb-3"><b>Beneficiary <span class="bNmbr">' + bene + '</span></b></h6>\
<div class="form-group row">\
<label for="ename' + bene + '" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2">\
<span class="pt-5">Name</span>\
<span class="text-danger"> *</span>\
</label>\
<div class="col-sm-7">\
<input type="text" class="form-control p-1 mt-1" id="ename' + bene + '" name="ebname[]" placeholder="Name">\
</div>\
<label for="enric' + bene + '" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2">\
<span class="pt-5">NRIC / Passport No.</span>\
<span class="text-danger"> *</span>\
</label>\
<div class="col-sm-7">\
<input type="text" class="form-control p-1 mt-1" id="enric' + bene + '" name="ebnric[]" placeholder="NRIC / Passport No">\
</div>\
<label for="relationship' + bene + '" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2">\
<span class="pt-5">Relationship</span>\
</label>\
<div class="col-sm-7">\
<input type="text" class="form-control p-1 mt-1" id="relationship' + bene + '" name="ebrelationship[]" placeholder="Relationship">\
</div>\
<div class="col-xs-12 col-sm-12 col-md-11 mt-2 text-right">\
<button class="btn btn-sm addBeneficiary" id="add' + bene + '">Add</button>\
<button class="btn btn-sm delBeneficiary ml-2" id="delete' + bene + '">Delete</button>\
</div>\
</div>\
</div>\
');
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h6 class='mt-3 mb-3'><b>Beneficiary <span class='bNmbr'>1</span></b></h6>
<div class="form-group row">
<label for="ename" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class='pt-5'>Name</span><span class='text-danger'> *</span></label>
<div class="col-sm-7">
<input type="text" class="form-control p-1 mt-1" id="ename" name='ebname[]' placeholder="Name" required='required' />
</div>
<label for="enric" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class='pt-5'>NRIC / Passport No.</span><span class='text-danger'> *</span></label>
<div class="col-sm-7">
<input type="text" class="form-control p-1 mt-1" id="enric" name='ebnric[]' placeholder="NRIC / Passport No" required='required' />
</div>
<label for="relationship" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class='pt-5'>Relationship</span></label>
<div class="col-sm-7">
<input type="text" class="form-control p-1 mt-1" id="Rrelationship" name='ebrelationship[]' placeholder="Relationship" required='required' />
</div>
<div class='col-xs-12 col-sm-12 col-md-11 mt-2 text-right'>
<button class='btn btn-sm addBeneficiary '>Add</button>
</div>
</div>
<div id='beneficiaries'>
</div>
Also on JSFiddle

Data is not appending to after clicking the reset button we are again reloading the page for appending the data

$("#copyBtn").click(function() {
var selected = $("#selectBox").val();
$("#output").append(" Origin :" + selected);
});
$("#copyBtn").click(function() {
var selected = $("#selectBox1").val();
$("#output").append("\n Case : " + selected);
});
$("#copyBtn").click(function() {
var selected = $("#selectBox2").val();
$("#output").append("\n Customer : " + selected);
});
$("#copyBtn").click(function() {
var selected = $("#textbox").val();
$("#output").append("\n Vendor : " + selected);
});
$("#copyBtn").click(function() {
var selected = $("#textbox1").val();
$("#output").append("\n Product : " + selected);
});
$(document).ready(function() {
$('#btn').click(function() {
/*Clear all input type="text" box*/
$('#form input[type="text"]').val('');
/*Clear textarea using id */
$('#form #output').val('');
$('#form #selectBox').val('Select');
$('#form #selectBox1').val('Select');
$('#form #selectBox2').val('Select');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" class="private-comments-form">
<div class="col-md-8 formdiv">
<div class="row">
<div class="col-xs-6 form-group"><label for="sel1">Select Origin of Case</label>
<select class="form-control" id="selectBox">
<option>Select</option>
<option>Customer</option>
<option>Tech</option>
<option>Tec</option>
<option>Account</option>
<option>Team</option>
</select>
</div>
<div class="col-xs-6 form-group"> <label for="sel1">Select Case Requestor</label>
<select class="form-control" id="selectBox1">
<option>Select</option>
<option>Vendor</option>
<option>Contact</option>
<option>Account</option>
</select>
</div>
<div class="col-xs-6 form-group"> <label for="sel1">Customer Request</label>
<select class="form-control" id="selectBox2">
<option>Select</option>
<option>Add</option>
<option>Update</option>
<option>Remove</option>
<option>Troubleshoot</option>
</select>
</div>
<div class="col-xs-6 form-group"> <label for="sel1">Vendor :</label> <input class="form-control" type="text" id="textbox" /></div>
<div class="col-xs-6 form-group"> <label for="sel1"> </label> <input class="form-control js-textareacopybtn" id="copyBtn" type="button" value="Get Content" /></div>
<div class="col-xs-6 form-group"> <label for="sel1">Product :</label> <input class="form-control" type="text" id="textbox1" /></div>
<div class="col-xs-12 form-group"> <label for="sel1">Copy Content :</label><textarea class="col-xs-12 js-copytextarea" id="output" name="textarea"></textarea></div>
<div class="col-xs-12 form-group"> <input type="button" class="reset " id="btn" onclick="myFunction()" value="Reset" /></div>
</div>
</div>
</form>
After clicking the reset button , again when we click the Get Content data is not appending
Am attaching the scripts for both Appending data and Reset Script
please check the code

Explanation
Any jQuery code that you plan to use in order to access DOMs (input, textarea, etc). Its better if they are executed inside the .ready method.
What this method does its to wait until the whole content of the page is loaded. Then, you can have access to all the DOMs without troubles.
Next, for the #copyBtn, you only needed to bind the click events once.
$(document).ready(function() {
$("#copyBtn").click(function() {
var text = " Origin :" + $("#selectBox").val();
text += "\n Case : " + $("#selectBox1").val();
text += "\n Customer : " + $("#selectBox2").val();
text += "\n Vendor : " + $("#textbox").val();
text += "\n Product : " + $("#textbox1").val()
$("#output").val(text);
});
$('#btn').click(function() {
/*Clear textarea using id */
$('#output').val('');
$('#form #selectBox').val('Select');
$('#form #selectBox1').val('Select');
$('#form #selectBox2').val('Select');
/*Clear all input type="text" box*/
$('#form input[type="text"]').val('');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" class="private-comments-form">
<div class="col-md-8 formdiv">
<div class="row">
<div class="col-xs-6 form-group"><label for="sel1">Select Origin of Case</label>
<select class="form-control" id="selectBox">
<option>Select</option>
<option>Customer</option>
<option>Tech</option>
<option>Tec</option>
<option>Account</option>
<option>Team</option>
</select>
</div>
<div class="col-xs-6 form-group"> <label for="sel1">Select Case Requestor</label>
<select class="form-control" id="selectBox1">
<option>Select</option>
<option>Vendor</option>
<option>Contact</option>
<option>Account</option>
</select>
</div>
<div class="col-xs-6 form-group"> <label for="sel1">Customer Request</label>
<select class="form-control" id="selectBox2">
<option>Select</option>
<option>Add</option>
<option>Update</option>
<option>Remove</option>
<option>Troubleshoot</option>
</select>
</div>
<div class="col-xs-6 form-group"> <label for="sel1">Vendor :</label> <input class="form-control" type="text" id="textbox" /></div>
<div class="col-xs-6 form-group"> <label for="sel1">Product :</label> <input class="form-control" type="text" id="textbox1" /></div>
<div class="col-xs-6 form-group"> <label for="sel1"> </label>
<input class="form-control js-textareacopybtn" id="copyBtn" type="button" value="Get Content" /></div>
<div class="col-xs-12 form-group"> <label for="sel1">Copy Content :</label><textarea class="col-xs-12 js-copytextarea" id="output" name="textarea"></textarea></div>
<div class="col-xs-12 form-group"> <input type="button" class="reset " id="btn" value="Reset" /></div>
</div>
</div>
</form>

when you need to add a value to text area you should use .val(),
you should get the old value and append what you want to add.
so your JS code should look like this:
$(document).ready(function() {
$("#copyBtn").click(function() {
var selected_origin = $("#selectBox").val();
var selected_case = $("#selectBox1").val();
var selected_customer = $("#selectBox2").val();
var selected_vendor = $("#textbox").val();
var selected_product = $("#textbox1").val();
$("#output").val($("#output").val() + " Origin :" + selected_origin);
$("#output").val($("#output").val() + "\n Case : " + selected_case);
$("#output").val($("#output").val() + "\n Customer : " + selected_customer);
$("#output").val($("#output").val() + "\n Vendor : " + selected_vendor);
$("#output").val($("#output").val() + "\n Product : " + selected_product);
});
$('#btn').click(function() {
/*Clear all input type="text" box*/
$('#form input[type="text"]').val('');
/*Clear textarea using id */
$('#form #output').val('');
$('#form #selectBox').val('Select');
$('#form #selectBox1').val('Select');
$('#form #selectBox2').val('Select');
});
});
or, if you want to keep your .append() as it is (I don't recommend it, cause if anyone edit in the textarea it will not work again),
so you have to clear the inner HTML for the textarea, not the value (cause in this case you are appending text nodes to your text area not changing it's value)
so you should replace $('#form #output').val(''); in the reset function with
this
$('#form #output').html('');
or
$('#form #output').text('');
and it will also work.

How to remove value by id from JSON file?

I have small project where I need to be able to insert/edit/delete records from JSON file. I use http://myjson.com/ API for this project (not sure if this is the best solution maybe some other sources API's are better). I'm trying to remove record from json file and I'm not sure how to do that. Is there any way to do that with this API? There are instructions on how to add/update records to the json file but none on how to remove record. Here is my code example:
var contactStorage = {};
/*** Start: Build Datatables function. ***/
function buildDataTable(tblID, columnsArray, displayLength) {
$('#' + tblID).DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"iDisplayLength": displayLength,
"aoColumnDefs": [{
'bSortable': false,
'aTargets': columnsArray
}],
"language": {
"emptyTable": "No records were found."
}
});
}
/*** End: Build Datatables function. ***/
/*** Start: Phone number format for US standard. ***/
$('.us-phone').on("keypress", formatPhoneUS);
function formatPhoneUS(e) {
var output,
inputVal = $(this).val().replace(/[^0-9]/g, ''),
area = inputVal.substr(0, 3),
pre = inputVal.substr(3, 3),
tel = inputVal.substr(6, 4);
if (parseInt(inputVal, 10)) {
if (area.length < 3) {
output = "(" + area;
} else if (area.length === 3 && pre.length < 3) {
output = "(" + area + ")" + " " + pre;
} else if (area.length === 3 && pre.length === 3) {
output = "(" + area + ")" + " " + pre + "-" + tel;
}
}
if (e.key === 'Backspace') return;
$(this).val(output);
};
/*** End: Phone number format for US standard. ***/
$("#frm_find").on("submit", findContacts);
function findContacts(e) {
e.preventDefault();
var frmFilter = $("#frm_filterby").val();
if (frmFilter) {
$.ajax({
type: 'GET',
url: 'https://api.myjson.com/bins/7iig8?' + new Date().getTime(),
dataType: 'json'
}).done(function(obj) {
contactStorage = obj.filter(function(entry) {
switch (frmFilter) {
case '1':
return entry.status === 1;
break;
case '2':
return entry.status === 0;
break;
default:
return entry;
}
});
showContacts(contactStorage);
}).fail(function(jqXHR, textStatus, errorThrown) {
alert('Error: ' + errorThrown);
});
}
}
function showContacts(contactStorage) {
var contactsTbl = "<table id='contactsTbl' class='table table-bordered'><thead><tr><th>Last</th><th>First</th><th>Email</th><th>Phone</th><th>Status</th><th class='text-center'>Edit</th><th class='text-center'>Delete</th></tr></thead><tbody>";
if (contactStorage) {
for (var key in contactStorage) {
contactsTbl += "<tr id='" + $.trim(contactStorage[key].id) + "'><td>" + $.trim(contactStorage[key].last) + "</td>";
contactsTbl += "<td>" + $.trim(contactStorage[key].first) + "</td>";
contactsTbl += "<td>" + $.trim(contactStorage[key].email) + "</td>";
contactsTbl += "<td>" + $.trim(contactStorage[key].phone) + "</td>";
contactsTbl += "<td>" + $.trim(contactStorage[key].status === 1 ? 'Active' : 'Inactive') + "</td>";
contactsTbl += "<td class='text-center'><button class='btn btn-default btn-sm contact_edit' data-toggle='collapse' data-target='#save_contact,#search_contact'><span class='glyphicon glyphicon-edit'></span></button></td>"
contactsTbl += "<td class='text-center'><button class='btn btn-default btn-sm contacts_delete'><span class='glyphicon glyphicon-remove'></span></button></td></tr>";
}
}
contactsTbl += "</tbody></table><div class='row'><div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'><div id='contact_message' class='alert message-submit'></div></div></div>";
$('#contacts_list').empty().append(contactsTbl).show();
buildDataTable('contactsTbl', [5, 6], 10);
}
var deleteID, targetTr;
$("#contacts_list").on("click", ".contacts_delete", displayContact);
function displayContact() {
deleteID = $(this).closest('tr').attr('id'), // Get record ID.
targetTr = $(this).parents('tr');
var lastName = targetTr.find("td").eq(0).text(),
firstName = targetTr.find("td").eq(1).text(),
bodyContent = $('<p>You are about to delete record for <b>' + lastName + ', ' + firstName + '</b>.<p>Do you want to proceed?</p>');
$('#delete_modalBody').empty().append(bodyContent); // Append elements to body content.
$('#deleteModal').modal('show'); // Show delete modal box.
}
$("#deleteModal").on("click", ":button.confirm_delete", removeContact);
function removeContact() {
if (deleteID) {
var table = $("#contactsTbl").DataTable(); // Select DataTable by ID.
table.row(targetTr).remove().draw(); // Remove record from DataTable.
delete contactStorage[deleteID]; // Remove element from JS object.
$("#contact_message").show().addClass("alert-success").html("Record successfully removed.").delay(5000).fadeOut('slow').queue(function() {
$(this).removeClass("alert-success").dequeue();
});
} else {
$("#contact_message").show().addClass("alert-danger").html("Error! Please contact your administrator.").delay(5000).fadeOut('slow').queue(function() {
$(this).removeClass("alert-danger").dequeue();
});
}
}
div.container {
padding-top: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- *** Start: JS and CSS for DataTables. *** -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.jqueryui.min.css" />
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" />
<!-- *** End: JS and CSS for DataTables. *** -->
<link rel="stylesheet" type="text/css" href="App.css" />
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">Welcome to Contact Application</div>
<div class="panel-body">
<div id="search_contact" class="collapse in">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#save_contact,#search_contact">
<span class="glyphicon glyphicon-plus-sign"></span> New Contact
</button>
</div>
</div>
<form name="frm_find" id="frm_find" autocomplete="off">
<div class="row find-row">
<div class="form-group col-xs-12 col-sm-12 col-md-3 col-md-offset-2 col-lg-3 col-lg-offset-2">
<select class="form-control" name="frm_filterby" id="frm_filterby" required>
<option value="">--Choose--</option>
<option value="1">Active</option>
<option value="2">Inactive</option>
<option value="3">Show All</option>
</select>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-3 col-md-offset-2 col-lg-3 col-lg-offset-2">
<button class="btn btn-block btn-primary" name="frm_search" id="frm_search">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</div>
</div>
</form>
<div id="contacts_list" class="table-responsive"></div>
</div>
<div id="save_contact" class="collapse">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#save_contact,#search_contact">
<span class="glyphicon glyphicon-circle-arrow-left"></span> Go Back
</button>
</div>
</div>
<form name="frm_contacts" id="frm_contacts" autocomplete="off">
<div class="form-group">
<label class="control-label" for="fname"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frm_first" id="frm_first" placeholder="Enter First Name" maxlength="50" title="A-Z, space, dash, apostrophe, period, comma - no other special characters" pattern="[a-zA-Z][A-Za-z' .,-]{0,49}$" required>
</div>
<div class="form-group">
<label class="control-label" for="lname"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frm_last" id="frm_last" placeholder="Enter Last Name" maxlength="50" title="A-Z, space, dash, apostrophe, period, comma - no other special characters" pattern="[a-zA-Z][A-Za-z' .,-]{0,49}$" required>
</div>
<div class="form-group">
<label class="control-label" for="email"><span class="label label-primary">Email address:</span></label>
<input type="email" class="form-control" name="frm_email" id="frm_email" placeholder="Enter Email" maxlength="80" required>
</div>
<div class="form-group required">
<label class="control-label" for="phone"><span class="label label-primary">Phone:</span></label>
<input type="tel" class="form-control us-phone" name="frm_phone" id="frm_phone" pattern="\(\d{3}\)[ ]?\d{3}[-]?\d{4}" maxlength="14" title="US based Phone Number in the format of: (xxx) xxx-xxxx" placeholder="(xxx) xxx-xxxx" required>
</div>
<div class="form-group required">
<label class="control-label" for="status"><span class="label label-primary">Status:</span></label>
<select class="form-control" name="frm_status" id="frm_status" required>
<option value="">--Choose--</option>
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
<button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-11 col-lg-11">
<div id="frm_message" class="alert alert-Submit"></div>
</div>
</div>
</form>
</div>
</div>
<div class="panel-footer">
<p><span>© 2018 MD. All Rights Reserved.</span></p>
</div>
</div>
</div>
<div id="deleteModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirm Delete</h4>
</div>
<div class="modal-body" id="delete_modalBody"></div>
<div class="modal-footer" id="delete_modalFooter">
<button type="button" class="btn btn-warning confirm_delete" data-dismiss="modal">Delete</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<script language="javascript" src="App.js"></script>
</body>
</html>
If anyone knows how this can be achieved or some other API's that can be used for this purpose please let me know.

How to show text box in html which is declared in JavaScript

I had written JavaScript function to add text boxes with on click function. Here i need to show text boxes wherever i want in the page. The textbox code written in p tag with innerHTML but i need to show text boxes in html.
<div class="col-sm-4 col-md-4">
<div class="row">
<label class="control-label col-sm-12 col-md-10"> </label>
<div class="col-sm-4 col-md-4" id="div">
<div id="wrapper">
<div id="field_div">
<span class="glyphicon glyphicon-plus" onclick="add_field();"></span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-12 col-md-12">Child
</label>
<div class="col-md-12" I need to show text box here instead in javascript </div>
</div>
</div>
</div>
<script>
function add_field() {
var total_text = document.getElementsByClassName("input_text");
total_text = total_text.length + 1;
document.getElementById("field_div").innerHTML = document.getElementById("field_div").innerHTML +
"<p id='input_text" + total_text + "_wrapper'><input type='text' class='input_text' id='input_text" + total_text + "' placeholder='Enter Text'><input type='text' class='form-control input_text' id='input_text" + total_text + "' placeholder='Enter Text'><input type='button' value='Remove' onclick=remove_field('input_text" + total_text + "');></p>";
}
function remove_field(id) {
document.getElementById(id + "_wrapper").innerHTML = "";
}
</script>

You are adding the text box in incorrect div. Simply specify the id = 'childDiv' in the lower div and get the text box there.
function add_field() {
var total_text = document.getElementsByClassName("input_text");
total_text = total_text.length + 1;
document.getElementById("childDiv").innerHTML = document.getElementById("childDiv").innerHTML +
"<p id='input_text" + total_text + "_wrapper'><input type='text' class='input_text' id='input_text" + total_text + "' placeholder='Enter Text'><input type='text' class='form-control input_text' id='input_text" + total_text + "' placeholder='Enter Text'><input type='button' value='Remove' onclick=remove_field('input_text" + total_text + "');></p>";
}
function remove_field(id) {
document.getElementById(id + "_wrapper").innerHTML = "";
}
<div class="col-sm-4 col-md-4">
<div class="row">
<label class="control-label col-sm-12 col-md-10"> </label>
<div class="col-sm-4 col-md-4" id="div">
<div id="wrapper">
<div id="field_div">
<span class="glyphicon glyphicon-plus" onclick="add_field();">+</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-12 col-md-12">Child
</label>
<div id='childDiv' class="col-md-12"> I need to show text box here instead in javascript </div>
</div>
</div>
</div>

<div class="col-sm-4 col-md-4">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-12 col-md-12">Child
</label>
<button onclick="add_field()">Add</button>
<div class="col-md-12" id="field_div"> I need to show text box here instead in javascript </div>
</div>
</div>
</div>
<script>
function add_field() {
var total_text = document.getElementsByClassName("input_text");
total_text = total_text.length + 1;
document.getElementById("field_div").innerHTML = document.getElementById("field_div").innerHTML +
"<p id='input_text" + total_text + "_wrapper'><input type='text' class='input_text' id='input_text" + total_text + "' placeholder='Enter Text'><input type='text' class='form-control input_text' id='input_text" + total_text + "' placeholder='Enter Text'><input type='button' value='Remove' onclick=remove_field('input_text" + total_text + "');></p>";
}
function remove_field(id) {
document.getElementById(id + "_wrapper").innerHTML = "";
}
</script>

Categories

Resources