JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page1">
    <ul id="courses"></ul>
</div>
<div id="page2">
    <p id="content"></p>
</div>

JavaScript

var myData = JSON.parse(jsonString);
$(document).ready(function() {
	function dContent() {
       $("#content").css("border","2px solid red").css("height","100px");
       $("#content").html($(this).data('value'));
    }
     $("#courses").on('click','li', dContent) 
    $.each(myData, function(index,item) { 
    $("#courses").append("<li class='li' data-value="+item.content+">"+item.chapter+"  <p>"+item.title+"</p></li>");
    	
    })
    

    
});