Adding JSON items to HTML using JQuery append

Question

Multiple buttons have category name ( data-bcategory ). When I click the button, based on that category value using ajax skills will display from the database. I have written a function which will return the JSON as below format. But in the view, I want to separate the category for each skill. I wrote each function and display skills value one by one but not for category. I think the solution is to write another each and display the category name. Please check the expected result and actual result.

HTML

<div class="modal-body" id="ajaxdisplayskills"> </div>

JQuery

<script type='text/javascript' language='javascript'>
  $(".boxselectcat").click(function () {
    var e = $(this).attr("data-bcategory")
    , l = $(this).attr("data-catgoid");
    $(".txtValueshwskillid").val(l), $.ajax({
     url: "<?php echo base_url(); ?>index/get_all_skills?category=" + e
     , type: "GET"
     , dataType: "json"
     , error: function () {
         $("#ajaxdisplayskills").append("<p>Some error please try again</p>")
     }
     , success: function (e) {
         $.each(e, function (e, l) {
            $("#ajaxdisplayskills").append('<label class="chkskills cursor1"><input class="hid" name="fr_skills" type="checkbox" value="' + l.id + '" />' + l.name + "</label>")
        })
      }
     })
    });
</script>

JSON

[
{
    "id": "95,100",
    "skill": "Car Washing,Sewage Cleaning",
    "sub_cat": "Cleaning"
},
{
    "id": "292",
    "skill": "Furniture Installation",
    "sub_cat": "Maintenance"
}
]

Actual Result

<label class="chkskillsedit cursor1">
    <input class="hid" name="fr_skills" type="checkbox" value="95">Car Washing</label>
<label class="chkskillsedit cursor1">
    <input class="hid" name="fr_skills" type="checkbox" value="100">Sewage Cleaning</label>
<label class="chkskillsedit cursor1">
    <input class="hid" name="fr_skills" type="checkbox" value="292">Furniture Installation</label>

Expected Result

<h4 class="signup-sub-cat">Cleaning</h4>
<label class="chkskillsedit cursor1">
    <input class="hid" name="fr_skills" type="checkbox" value="95">Car Washing</label>
<label class="chkskillsedit cursor1">
    <input class="hid" name="fr_skills" type="checkbox" value="100">Sewage Cleaning</label>
<h4 class="signup-sub-cat">Maintenance</h4>
<label class="chkskillsedit cursor1">
    <input class="hid" name="fr_skills" type="checkbox" value="292">Furniture Installation</label>

Answer 1

You have to use two functions to archive your goal.

First, you have to use each function to separate the category. Then use forloop to display all skills under those category.

Answer 2

I found the answer.

$.each(e, function (e, l) {
 $("#ajaxdisplayskills").append('<h4 class="signup-sub-cat">' + l.sub_cat + '</h4>');
 var skill_name = l.skill.split(',');
 var skill_id = l.id.split(',');
 var q;
 for (q = 0; q < skill_name.length; q++){
      $("#ajaxdisplayskills").append('<label class="chkskills cursor1"><input class="hid" name="fr_skills" type="checkbox" value="' + skill_id[q] + '" />' + skill_name[q] + "</label>");
      }
 })