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" class="ulkeler">
				<option value="1">TR</option>
				<option value="2">EN</option>
			</select>
			<select id="il-1" class="iller">
				<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,
    
    yeni_id_ulke,
    yeni_id_il,
    say = 1;

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

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

$('#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);
	
});

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