Hi am adding toggle buttons dynamically when click on a button. But after adding I clicked on one button it is working fine after clicking other button then it will effecting first one only.

please help me!

HTML code:

```
<div id='test'>
    <button onclick="myFunction()">
        Add toggle button
    </button>
</div>

```

CSS code:

```
 #switchdiv
{
clear: both;
margin:1px;
}

input.switch:empty
{
margin-left: -999px;
}

input.switch:empty ~ label
 {
position: relative;
float: left;
line-height: 1.6em;
text-indent: 4em;
margin: 0.2em 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
     user-select: none;
 }

input.switch:empty ~ label:before, 
input.switch:empty ~ label:after
{
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: ' ';
width: 3.6em;
background-color: #c33;
border-radius: 0.3em;
box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);
-webkit-transition: all 100ms ease-in;
     transition: all 100ms ease-in;
 }

input.switch:empty ~ label:after
{
width: 1.4em;
top: 0.1em;
bottom: 0.1em;
margin-left: 0.1em;
background-color: #fff;
border-radius: 0.15em;
box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);
}

 input.switch:checked ~ label:before
{
background-color: #393;
 }

input.switch:checked ~ label:after
{
margin-left: 2.1em;
}

```

javaScript code:

```
$('button').click(function() {
    var element = $('#test');
    var toggle_button = '<div id="switchdiv">\
        <input type="checkbox" id="switch1" name="switch1" class="switch" visible="false"/>\
        <label for="switch1">first switch</label>\
        </div>';
    element.append(toggle_button);
});

```