<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="jsPluginDiv"></div> <script> new javascriptPlugin('jsPluginDiv', { bgColor: 'red', data: [ {name: "Mohammad", age: 23, gender: 'Male'}, {name: "Atif",age: 22,gender: 'Male', className: "myClass2"}, {name: "Shahena",age: 20,gender: 'female'}, ] }); </script>

class otherProps { constructor(data) { this.data = data; } colorFn() { return 'color is ' + this.data['bgColor']; } } class javascriptPlugin extends otherProps { constructor(className,data) { super(data); this.className = className; this.data = data; this.fn1(); this.fn2(); this.fn3(); } fn1() { console.log('fn1->', this.data); var array = this.data.data; var output = ""; for (var i = 0; i < array.length; i++) { output += `<div> <b>Name-</b> `+ array[i].name + ` <b>Age-</b> ` + array[i].age + ` <b>Gender-</b> ` + array[i].gender + `</div>`; } document.getElementsByClassName(this.className)[0].innerHTML = output; } fn2(){ console.log('fn2->', this.colorFn()); } fn3(){ console.log('fn3->', this.className); } }