Good old Polymer template
HTML
<script src="//cdn.jsdelivr.net/polymer.platform/0.4.2/platform.js"></script>
<script src="//cdn.jsdelivr.net/polymer/0.4.2/polymer.js"></script>
<template id="myTempl" bind>
Hello {{who}}!
</template>
JavaScript
$(function() {
// Plan JSON
/*var plans = [{
"name": "Digi SmartPlan 238",
"internet": "1900",
"calls": "100",
"sms": "100",
"planprice": "238",
"shortDesc": "8GB Internet,200 DiGi,DiGi SMS",
"attrs": {
"attrs1": {
"title": "Unlimited Social",
"value": "wechat, whatsapp, facebook"
},
"attrs2": {
"title": "Subsequent Charges",
"value": " 15sen, / min "
},
"attrs3": {
"title": "Roaming",
"value": " N/A "
}
},
"planpurchaselink": "/product-config.ep?pID=10172VPA&isBundle=y&ppymttype=POSTPAID&ptype=VOICE",
"device": {
"ios": {
"name": "Samsung Galaxy Note 5",
"planName": "Digi SmartPlan 148",
"price": "1379",
"id": "GALAXY_NOTE5"
},
"android": {
"name": "iPhone 6s Plus",
"planName": "Digi SmartPlan 148",
"price": "2201",
"id": "IPHONE_6S_PLUS"
}
}
}, {
"name": "Digi SmartPlan 239",
"internet": "1400",
"calls": "300",
"sms": "100",
"planprice": "238",
"shortDesc": "8GB Internet,200 DiGi,DiGi SMS",
"attrs": {
"attrs1": {
"title": "Unlimited Social",
"value": "Yes"
},
"attrs2": {
"title": "Subsequent Charges",
"value": " 15sen, / min "
},
"attrs3": {
"title": "Roaming",
"value": " N/A "
}
},
"planpurchaselink": "/product-config.ep?pID=10172VPA&isBundle=y&ppymttype=POSTPAID&ptype=VOICE",
"device": {
"ios": {
"name": "Samsung Galaxy Note 5",
...