JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<script src="https://cloudentist.ufukozdemir.website/assets/js/jquery.chained.min.js"></script>
<div class="container">
	<div class="i_ana">
		<div class="eksi">
			<select id="ulke-1" onchange="getval(this);">
				<option value="1">TR</option>
				<option value="2">EN</option>
			</select>
			<select id="il-1">
				<option value="1" class="1">İzmir</option>
				<option value="2" class="1">İstanbul</option>
				<option value="3" class="2">London</option>
				<option value="4" class="2">London2</option>
			</select>
			<button class="eksi-btn">Delete</button>
			<hr>
		</div>
	</div>
</div>

<div class="package"></div>
<button id="clone">clone</button>
<br>
<div id="log"></div>

JavaScript

var old_ulke_id,
	new_ulke_id,
	new_il_id,
	old_il_id;

function change(il_id, ulke_id) {
	$("#" + il_id).chained("#" + ulke_id);
}

function getval(sel) {
    alert(sel.value);
}

$(document).ready(function(){
	//change('il-1', 'ulke-1');
	change('il-2', 'ulke-3');
	change('il-3', 'ulke-3');
	change('il-4', 'ulke-4');
	change('il-5', 'ulke-5');
});

var $say = 1;
$('#clone').click(function(){
    var $button = $('.i_ana').clone();
    $('.package').html($button);

    $say++;

    var old_ulke_id = $('.package #ulke-1').attr("id");
    var new_ulke_id = old_ulke_id.replace("ulke-1", "ulke-" + $say);
    $('.package select:first').attr("id", new_ulke_id);

    var old_il_id = $('.package #il-1').attr("id");
    var new_il_id = old_il_id.replace("il-1", "il-" + $say);
    $('.package select:first').next().attr("id", new_il_id);
	
    change(new_il_id, new_ulke_id);
    $('#log').prepend('<small style="color:red">İl: ' +new_il_id+ ' --- Ülke: ' +new_ulke_id+'</small><br>');
	
});



$('.package').on("click", ".eksi-btn", function(){
	$(this).parent().remove();
});