JSFiddle - React, Tailwind, and code Playground

HTML

<div id="addIO">
    <ul id="ioAddul">
        <li class="ioAddli">
            <p>
                <label>Concept</label>
                <select id="ConceptSelect"></select>
            </p>
            <p>
                <label>Name</label>
                <input type="text" name="name" id="aioConceptName"/>
            </p>
        </li>
        <li class="ioAddli">
            <p>
                <label>Concepts</label>
                <a href="#" class="smallLink" id="aioShowLink">Show Concepts</a>
            </p>
            <p>
            <div id="ioAddRelatedConcepts">
                <?php /* ?>
                  <p>
                  connect to
                  <span class="ioAddConcept">concpet1</span>
                  with
                  <span class="ioAddRelation">relation1</span>
                  <select>
                  <option>choose io</option>
                  <option>roma</option>
                  <option>totti</option>
                  </select>
                  </p>
                  <p>
                  connect to
                  <span class="ioAddConcept">concpet1</span>
                  with
                  <span class="ioAddRelation">relation1</span>
                  <select>
                  <option>choose io</option>
                  <option>roma</option>
                  <option>totti</option>
                  </select>
                  </p>    <?php */ ?>
            </div>
            </p>
        </li>
        <li class="ioAddli" id="ioAddContents">
            <p><label>Contents</label></p>
            <p>
                <label class="ioAddOneContent">write one info</label>
                <input type="text" class="longInput"/>
                <a href="" class="smallLink" onclick="return ioAddNewContent(this)">new info</a>
            </p>
        </li>
        <li class="ioAddli"id="ioAddOtherRelation">
            <a href="" onclick="return ioAddSetOtherRelation(this)"class="smallLink">add other...

JavaScript

$(document).ready(function(){
    $(".ioAddli").on('click','#aioShowLink',function(){
        $('#aioShowLink').remove();
        var conceptName = $("#aioConceptName").val();
        alert(conceptName);
        $.getJSON("http://localhost/Mar7ba/Ontology/getRelatedConceptsAndRelations/"+conceptName+"/TRUE",function(data){
            var concepts = data[0];
            var relations = data[1];
            for(var i = 0 ; i < count(concepts) ; i++){
                $("#ioAddRelatedConcepts").append('<p>\n\
                  connect to\n\
                  <span class="ioAddConcept">concpet1</span>\n\
                  with\n\
                  <span class="ioAddRelation">relation1</span>\n\
                  <select>\n\
                  <option>choose io</option>\n\
                  <option>roma</option>\n\
                  <option>totti</option>\n\
                  </select>\n\
                  </p>\n\
                  <p>');
            }
        });
    });
});