JSFiddle - React, Tailwind, and code Playground

HTML

<div id="list">
    <ul>
        <li id="directory_1" class="test">directory_1</li>
        <li id="directory_2" class="test">directory_2</li>
        <li id="directory_3" class="test">directory_3</li>
        <li id="directory_4" class="test">directory_4</li>
    </ul>
</div>
<div id="content">
    
    
</div>

CSS

#list{
    height:100px; 
    width:auto; 
    border: 1px solid green;
}

#content{
    height:300px; 
    width:300px; 
    border: 1px solid red;   
}

JavaScript

$(".test").click(function(){
    var name = $(this).attr("id");
 
     $.ajax({
            url: 'list.php',
            type: "POST",
            data: ({id: name}),
        }); 
});