Search code examples
jqueryclone

cloning does the same thing as parents clone

I have code like this, when I choose list from select box before I click button clone it's show data, so after that I click button clone, why it's direct appear the data on the clone? What I want is when I choose list from select box clone, the cloning don't direct appear the data before I choose list from select box cloning.

And the other problems it's the cloning affect to the other her parents or other cloning. How to clone technique without affect to the other clone?

$(document).ready(function(){
		$(document).on( "click", "a#addhewan", function() {
			var confirm = window.confirm('Yakin menambah data hewan??');            
			if(confirm == true){                
				var newForm = $('.form1 .data_hewan').html();            
				$(newForm).insertBefore('.newForm');
	            // $('.master-hewan').addClass('hidden');        
	        }
	    });

		$(document).on("change","#pet_name",function(){
			var allRule = $('.all-rule');
			if($(this).val() == 1){
				var form1 = $('.form1').find('.all-rule .formRule1').clone().removeClass('hidden');
				$(form1).appendTo('.show-rule');
			}
		})
	});
.hidden{
		display: none;
	}
<!DOCTYPE html>
<html>
<head>
	<title>fdsjf</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<div class="form1">
		<div class="data_hewan">
			<select name="pet" class="form-control" id="pet_name">
				<option value="" selected="selected">Pilih Ras Hewan</option>
				<option value="1">Korean Jindo</option>
				<option value="2">Siberian Husky</option>
				<option value="3">Maine Coon</option>
			</select>

			<div class="all-rule hidden">
				<div class="formRule1 hidden">
					<span>halo</span>
				</div>
				<div class="formRule2 hidden">
					<span>eooo</span>
				</div>
			</div>
			<div class="show-rule">
			</div>
			<div class="newForm">

			</div>
		</div>
		<a id="addhewan" name="add" id="addhewan">Add Hewan</a>
	</div>

	
</body>
</html>

What I want:

enter image description here

Solution

  • you need to fix the html and jQuery selector $('.form1').find('.all-rule .formRule1') will apply to all .formRule1 so you need to specify the parent. check this code below:

    $(document).ready(function(){
		$(document).on( "click", "a#addhewan", function() {
			var confirm = window.confirm('Yakin menambah data hewan??');            
			if(confirm == true){                
			    var newForm = $('.form1 .data_hewan:first').clone();            
                newForm.find('.show-rule').html('');
				newForm.insertBefore('.newForm');
	            // $('.master-hewan').addClass('hidden');        
	        }
	    });

		$(document).on("change","#pet_name",function(){
			var data = $(this).parent();
			if($(this).val() == 1){
				var form1 = data.find('.all-rule .formRule1').clone().removeClass('hidden');
				form1.appendTo(data.find('.show-rule'));
			}
		})
	});
    .hidden{
		display: none;
	}
    <!DOCTYPE html>
<html>
<head>
	<title>fdsjf</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<div class="form1">
		<div class="data_hewan">
			<select name="pet" class="form-control" id="pet_name">
				<option value="" selected="selected">Pilih Ras Hewan</option>
				<option value="1">Korean Jindo</option>
				<option value="2">Siberian Husky</option>
				<option value="3">Maine Coon</option>
			</select>

			<div class="all-rule hidden">
				<div class="formRule1 hidden">
					<span>halo</span>
				</div>
				<div class="formRule2 hidden">
					<span>eooo</span>
				</div>
			</div>
			<div class="show-rule">
			</div>
		</div>
		<div class="newForm"></div>
		<a id="addhewan" name="add" id="addhewan">Add Hewan</a>
	</div>

	
</body>
</html>