Question: Here i'm trying to clone a `<div class="main"` and i need to change the color of this parent `div`.but at a time its changing only once `(only first panel)` after the cloning. Also cloning repeating multiple time on a button click while i need to clone it only once on every button click. Can someone help me to solve this?

Here is the code link: <https://jsfiddle.net/Issact/k69pxad9/>

```
<div class="body">
<div class="main">
<div class="inner">
<div class="content">
This is a test content
</div>
</div>
<button type="button" class="ChangeColor">
Change color
</button>
</div>

<Button type="button" class="clickButton">
Click on button
</Button>
</div>

```

CSS: 

```
.main {
  background-color:#000;
  color:#fff;
  font-size:18px;
  padding-bottom:15px;
  padding-left:15px;
}
.inner {
  padding:15px;
}

```

JS:

```
$(document).ready(function(){

$('.clickButton').click(function(){
$('.main').clone().appendTo('.body');
});

$('.ChangeColor').click(function(){
$(this).parent('.main').css({backgroundColor: 'green'});
});

});

```

Answer: 
Use delegate click event for dynamically created element please find below sample for you case.

I would recommend to use `.on` below is a signature of `.on` function

```
$(document).on( eventName, selector, function(){} );

$("body").on("click", "#YOUR_DYNAMICALLY_CREATED_ELEMENT", function(event){
    //Do Some stuff
});

// Your case it would be like below
$(document).on('click','.ChangeColor',function(){
    $(this).parent('.main').css({backgroundColor: 'green'});
});

```

[FIDDLE](https://jsfiddle.net/k69pxad9/4/)
It is because the elements created by `.clone()` don’t bind handlers.

Use

```
$('.body').on('click', '.clickButton', function(){
    $('.main').clone().appendTo('.body');
});

```

to resolve it