JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

navigationAdmin.jsp:

<!--<span data-bind="foreach: $data.entry.allSF">
<input type="checkbox" data-bind="{value:platform, checked: isChecked(), click: $root.toggleAssociation }"/>
 <img class="sf-icon" data-bind="attr:{ src: '/../../../static/img/navigationAdmin/' + imgUrl }, css: {disable: !isChecked(), enable:isChecked()}" />
</span>-->
<span class="sf-container"></span>

JavaScript

navigationAdmin/main.js:

onSubmit(){
      var elem = $('input[name="bucketDTO.categoryLabels[0]"]'), chkBoxes =       $('input[name="bucketDTO.bucketDTO.associatedSF[0]"]');
    if(elem.length == 1){
        objBucketDTO.associatedSF.entry["key"] = elem.eq(0).val();
        objBucketDTO.associatedSF.entry["value"] = chkBoxes.eq(0).val();
    } else if (elem.length > 1) {
        objBucketDTO.associatedSF.entry = new Array(elem.length);

        for (var i = 0; i < objBucketDTO.associatedSF.entry.length; i++){
            objBucketDTO.associatedSF.entry[i]["key"] = elem.eq(i).val();
            objBucketDTO.associatedSF.entry[i]["value"] = chkBoxes.eq(i).val();
        }
    }
}

_.addLabels = function (data) {
  ...
  ...
  ...
  createSFMarkUp(data);
}


//put this at last

function createSFMarkUp(data){
    if(!data.entry.length){
        var sf_html = "";
        var elem = data.entry.allSF;
        for(var i = 0; i < elem.length; i++){
            if (elem[i].isChecked) sf_html += '<input class="toggleSF" type="checkbox" checked value = ' + elem[i].platform + '/><img class="sf-icon enable" src="/../../../static/img/navigationAdmin/'+ elem[i].imgUrl +'" />';
            else sf_html += '<input class="toggleSF" type="checkbox" value = ' + elem[i].platform + '/><img class="sf-icon disable" src="/../../../static/img/navigationAdmin/'+ elem[i].imgUrl +'" />';
        }
        $(".sf-container").append(sf_html);
    } else {
        var sf_html = {};
        for (var i = 0; i < data.entry.length; i++){
            sf_html[i] = "";
            var elem = data.entry[i].allSF;
            for(var j = 0; j < elem.length; j++){
                if (elem[j].isChecked) sf_html[i] += '<input class="toggleSF" type="checkbox" checked value = ' + elem[j].platform + ' /><img class="sf-icon enable" src="/../../../static/img/navigationAdmin/'+ elem[j].imgUrl +'" />';
                else sf_html[i] += '<input class="toggleSF" type="checkbox" value = ' + elem[j].platform + '...