JSFiddle - React, Tailwind, and code Playground
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">Rawson</option>
<option value="2" class="2">Godoy Cruz</option>
<option value="3" class="3">Coquimbo</option>
<option value="4" class="4">Chiñihue</option>
</select>
</div>
CSS
#template{
display:none;
}
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');
}