JSFiddle - React, Tailwind, and code Playground

by faizan zeb

HTML

<script src="http://www.appelsiini.net/download/jquery.chained.mini.js"></script>
<div id="filter">
            <a id="clone" href="#">+</a> <a id="remove" href="#">-</a>
            
        </div>
        <div id="template">
            <select class="pais">
                <option value="1">Argentina</option>
                <option value="2">Chile</option>
            </select>
            <select class="provincia">
                <option value="1" class="1">San Juan</option>
                <option value="2" class="1">Mendoza</option>
                <option value="3" class="2">La Serena</option>
                <option value="4" class="2">Santiago</option>
            </select>
            <select class="ciudad">
                <option value="1" class="1">12</option>
                <option value="2" class="2">10</option>
                <option value="3" class="3">28</option>
                <option value="4" class="4">10</option>
            </select>
</div></br>
    <div>
        <input type="text" value="0">
</div>

JavaScript

$(function() {

    // Form element cloning
    var i = 0;
    $('#clone').click(function() {
        
        $('#template').clone().appendTo('#filter');
        $('#filter #template').attr('id', 'duplicate' + i);
        $('#filter div:hidden').show();


        chainItWithId(i);
        i++;
    });
    $('#remove').click(function() {
        $('#filter > div').last().remove();
    });
    
    $('#clone').click();
});

function chainItWithId(id) {
    $('#duplicate' + id + ' .provincia').chained('#duplicate' + id + ' .pais');
    $('#duplicate' + id + ' .ciudad').chained('#duplicate' + id + ' .provincia');
}


function chainTemp() {
    $('#template .provincia').chained('#template .pais');
    $('#template .ciudad').chained('#template .provincia');
}