Trouble dynamically changing state of checkbox with AJAX

Question

I am trying to have to check boxes through ajax, but it is not working properly. I am not able to change state of the first checkbox, only the second one is working fine. Could anyone spot the error here?

$.ajax({
    type:"POST",
    url:"../scripts/domainlist.php?dept="+deptid+"&pro="+proid,
    contentType:"application/json; charset:utf-8",
    dataType:"json",
    success: function(data){
        $('#domainlist').empty();
        $('#domainlist')
        .append("<tr rowspan='2' class='domainname'>
                      <th class='domainname'>Domain Name</th>
                      <th class='domainname'>Is this domain applicable to your organization?</th>
                      <th style='height:30px' class='domainname'>Do you want this domain to be displayed?</th>
                 </tr>");
        var index = 0;
        $.each(data,function(i,item){

            var index2=index+1;

            var display_status = "";
            var applicable_status = "";
            if(data[i].applicable == 1){
                applicable_status = "checked";
            }
            if(data[i].display == 1){
                display_status = "checked";
            }

            $('#domainlist')
        .append("<tr class='domainname'>
                    <td class='domainname'>
                       <a href='setcategoryapplicability.php?dom="+ data[i].domid +"'>"+ data[i].domname +"</a>
                    </td>
                    <td>
                         <input id='toggle-"+index+"' name='applicable["+data[i].domid+"]' class='toggle toggle-round' type=checkbox "+applicable_status+">
                             <label for='toggle-"+index+"]'></label>
                   </td>
                   <td>
                        <input id='toggle-"+index2+"' name='display["+data[i].domid+"]' class='toggle toggle-round' type=checkbox "+display_status+">
                             <label for='toggle-"+index2+"'></label>
                 </td>
               </tr>");
            index = index +2;
        });
    },
    complete: function(){
    }
});

Answer 1

I am so sorry to trouble you guys. I feel so stupid. Thank you for your responses. It is working fine now.

Answer 2

Confirm your data is correct

If your data is coming in as expected, the application should work.

If you are having trouble with the first checkbox, then data[i].applicable may not be in the expected format.

See the example below where I pass in hard coded data in the expected format (based on my reading of the code since you didn't provide an example data object):

var data = [
    {
        "domid": "domid_A",
        "domname": "Domain Name A",
        "applicable": 0,
        "display": 0
    },
    {
        "domid": "domid_B",
        "domname": "Domain Name B",
        "applicable": 1,
        "display": 1
    }
];
var index = 0;

$('#domainlist').empty();
$('#domainlist').append(
    "<tr rowspan='2' class='domainname'>" +
    "    <th class='domainname'>Domain Name</th>" +
    "    <th class='domainname'>Is this domain applicable to your organization?</th>" + 
    "    <th style='height:30px' class='domainname'>Do you want this domain to be displayed?</th>" +
    "</tr>"
);
$.each(data, function (i, item) {
    
    var index2 = index + 1;
    var display_status = "";
    var applicable_status = "";

    if (data[i].applicable == 1) {
        applicable_status = "checked";
    }

    if (data[i].display == 1) {
        display_status = "checked";
    }
    
    $('#domainlist').append(
        "<tr class='domainname'>" +
        "    <td class='domainname'>" +
        "        <a href='setcategoryapplicability.php?dom=" + data[i].domid + "'>" + data[i].domname + "</a>" +
        "    </td>" +
        "    <td>" +
        "        <input id='toggle-" + index + "' name='applicable[" + data[i].domid + "]' class='toggle toggle-round' type=checkbox " + applicable_status + ">" +
        "        <label for='toggle-" + index + "]'></label>" + 
        "    </td>" +
        "    <td>" +
        "        <input id='toggle-" + index2 + "' name='display[" + data[i].domid + "]' class='toggle toggle-round' type=checkbox " + display_status + ">" +
        "        <label for='toggle-" + index2 + "'></label>" +
        "    </td>" +
        "</tr>"
    );
    index = index + 2;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="domainlist"></table>