$(document).ready(function(){
var counter = 1;
var wrapper = $("#accordion");
$("#addButton").on("click", function(e){
e.preventDefault();
var catgName = prompt("Please Add your category name");
if(catgName == ''){
catgName = 'Catg#'+counter;
}
if(catgName != null){
var ariaExpanded = false;
var expandedClass = '';
var collapsedClass = 'collapsed';
if(counter==1){
ariaExpanded = true;
expandedClass = 'in';
collapsedClass = '';
}
$(wrapper).append('<div class="col-sm-12" style="margin-bottom: 0;"><div class="panel panel-default" id="panel'+ counter +'">' +
'<div class="panel-heading" role="tab" id="heading'+ counter +'"><h4 class="panel-title">' +
'<a class="'+collapsedClass+'" id="panel-lebel'+ counter +'" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse'+ counter +'" ' +
'aria-expanded="'+ariaExpanded+'" aria-controls="collapse'+ counter +'"> '+catgName+' </a><div class="actions_div" style="position: relative; top: -26px;">' +
'<a href="#" accesskey="'+ counter +'" class="remove_ctg_panel exit-btn pull-right"><span class="glyphicon glyphicon-remove"></span></a>' +
'<a href="#" accesskey="'+ counter +'" class="edit_ctg_label pull-right"><span class="glyphicon glyphicon-edit "></span> Edit</a>' +
'<a href="#" accesskey="'+ counter +'" class="pull-right" id="addButton2"> <span class="glyphicon glyphicon-plus"></span> Add child category</a></div></h4></div>' +
'<div id="collapse'+ counter +'" class="panel-collapse collapse '+expandedClass+'"role="tabpanel" aria-labelledby="heading'+ counter +'">'+
'<div class="panel-body"><div id="TextBoxDiv'+ counter +'"></div><a class="btn btn-xs btn-primary" accesskey="'+ counter +'" id="addButton3" ><span class="glyphicon glyphicon-plus"></span> Add New Attributes</a>' +
'<a class="btn btn-xs btn-success" accesskey="'+ counter +'" id="ajax_submit_button" >Done</a></div></div></div></div>');
counter++;
}
});
var x = 1;
$(wrapper).on("click","#addButton2", function(e){
e.preventDefault();