JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<div id="levelA"><strong>LEVEL A:</strong><br/></div>

<div id="levelB"><strong>LEVEL B:</strong><br/></div>

JavaScript

var list ={"PEOPLE": [
        {  "name": "Bob",   "level": "A",  "gender": "F"},
            {  "name": "Sue", "level": "B", "gender": "F"},
           {  "name": "Molly", "level": "A", "gender": "M"},
           {  "name": "Joe",  "level": "B", "gender": "N"},
            {  "name": "Jack", "level": "B",  "gender": "F"}
		    ]};
var count = 0;
$.each(list.PEOPLE,function(index,item){
    if(item.level === "A")
        $("#levelA").append(item.name+"<br/>")
    if(item.level === "B")
        $("#levelB").append(item.name+"<br/>");
})