JSFiddle - React, Tailwind, and code Playground

by fguillen

HTML

<div class="container" id="addRelation">
    <ul class="containerUL">
        <li class="containerLI">
            <label>Name</label>
            <input type="text" name="relationName" class="longInput1"/>
            <div id="arSuggestions"></div>
        </li>
        <li>
            <label>Related Concepts</label>
            <p>
                <label>Source</label>
                <select name="source[]" id="source">
                    <option>select source</option>
                </select>
            </p>
            <p>
                <label>Destination</label>
                <select name="destination[]" id="destination">
                    <option>select destination</option>
                </select>
            </p>
            <p>
                <a href="#" class="araNew">new</a>
                <a href="" class="araDel">delete</a>
            </p>
        </li>
    </ul>
</div>

JavaScript

$("#addRelation").ready(function (){
    $("#addRelation a").css("padding","6px");
    $("#addRelation .araNew").bind('click',function(){
        $("#addRelation .araNew").hide();
        $("#addRelation ul li:last").append('<li> \n\
<p>\n\
      <label>Source</label>\n\
      <select name="source[]" id="source">\n\
             <option>select source</option>\n\
      </select>\n\
</p>\n\
<p>\n\
      <label>Destination</label>\n\
      <select name="destination[]" id="destination">\n\
              <option>select destination</option>\n\
      </select>\n\
</p>\n\
 <p>\n\
       <a href="#" class="araNew">new</a> \n\
       <a href="#" class="araDel">delete</a> \n\
</p>\n\
</li>');
    });