Dynamic Table with Add,Edit and Delete

by ronnjoe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script>
<div id="container"></div>
<script id="entry-template" type="text/x-handlebars-template">
		<select name="{{inputContent.name}}">
    	{{#each inputContent.key}}
    		<option value="{{this.value}}"> {{this.name}}</option>
      {{/each}}
    </select>
    <input type="text" name="{{inputContent.name}}" value="{{inputContent.value}}" />
</script>

JavaScript

var abc = {
	"data": [{
		"id": 1,
		"name": "Label 1",
		"value": "L1",
		"child": [{
			"id": 12,
			"name": "Label 12",
			"key": [{
      	"name":"Hi",
        "value":"Hi"
        },{
      	"name":"Hello",
        "value":"Hello"
        },{
      	"name":"Hey",
        "value":"Hey"
        }],
			"value": "L12"
		}, {
			"id": 22,
			"name": "Label 22",
			"key":  [{
      	"name":"Hi",
        "value":"Hi"
        },{
      	"name":"Hello",
        "value":"Hello"
        },{
      	"name":"Hey",
        "value":"Hey"
      }],
			"value": "L22"
		}]
	}]
}
/*
var annotateParentTag = $("<div>", {
  class: "annotationNotificationBox"
});
var annotateHeaderTag = $("<h4>", {
  text: "Add Anottation For"
});
var annotateSelectTag = $("<select>", {
  class: "annotationNotificationList"
});
var annotateSelectOptions = $("<option>", {
  value: "",
  text: "Select Annotation Type"
});
var annotateCancel = $("<input>", {
  value: curVal.value,
  type: "text",
});
*/
$.each(abc.data,function(key,val){
	var ParentTag = $("<div>", {
  	id: val.id
	});  
  $("#container").append(ParentTag);
	var HeaderTag = $("<h4>", {
  	text: val.name
	}); 
  $("#"+val.id).append(HeaderTag);
  $.each(val.child,function(keyIndex,curVal){     
    var source = $("#entry-template").html();
    var template = Handlebars.compile(source);
     $("#"+val.id).append(template({
      "inputContent": curVal
    }));
  });
});