I am trying to dynamically append DIV tag after the last one. Also if the user clicks remove button then div in which the remove button is clicked should be eliminated. My caption (is in JS and want to covert it in JQquery) is also not working well. There are some minor adjustment required.
<script type="text/javascript" src="jquery.js"></script>
$(document).ready(function() {
var uniqueId = 1;
$("#addRequest").click(function() {
var RequestDiv = "#div_" + $('#combo_3 option:selected').val() + "_1";
var RequestTableCap = "tbl_" + $('#combo_3 option:selected').val();
if ($(RequestDiv).is(":visible")) {
var template = $(RequestDiv).clone();
uniqueId++;
template.find('input,select,textarea,table').each(function() {
var newId = this.id.substring(0, this.id.length - 1) + uniqueId;
$(this).prev().attr('for', newId); // update label for
this.name = this.id = newId; // update id and name (assume the same)
})
.end()
.attr('id', 'div_data_1_1_1_1_' + uniqueId)
.appendTo('#idRequestDetails');
var TableCaption = 'Request #: ' + uniqueId + ' ' + $('#combo_2 option:selected').text() + ' ' + $('#combo_1 option:selected').text() + ' (' + $('#combo_3 option:selected').text() + ')';
var tbcaption = document.getElementById('RequestTableCap').createCaption()
tbcaption.innerHTML = TableCaption
}
if ($(this).attr("enabled", true)) {
if ($("#div_data_1_1_1_1_1").is(":hidden")) {
$(RequestDiv).slideDown("fast"); //Slide Down Effect
var RequestTableCap = "tbl_" + $('#combo_3 option:selected').val();
var TableCaption = 'Request #: ' + uniqueId + ' ' + $('#combo_2 option:selected').text() + ' ' + $('#combo_1 option:selected').text() + ' (' + $('#combo_3 option:selected').text() + ')';
var tbcaption = document.getElementById(RequestTableCap).createCaption()
tbcaption.innerHTML = TableCaption;
}
}
else {
$(RequestDiv).slideUp("fast"); //Slide Up Effect
}
});
$('.removeReq').click(function() {
$(this).closest.attr('div').remove();
});
});
