javascript - jQuery click works only once -

i want create circle everytime click button once click it, creates circle when click again nothing happen.

$(document).ready(function() {    var circle = $("<div class='circleclass'></div>");    $(".t-testbody").on("click", "#clickme", function() {      $(".t-testbody").append(circle);    });  });

.t-testbody {    margin-top: 100px;    margin-left: 50px;  }  .circleclass {    width: 50px;    height: 50px;    border-radius: 100%;    background-color: blue;    display: inline-block;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="t-testbody">    <div class="circleclass"></div>    <button id="clickme">button</button>  </div>

currently have created element , appended div. second append statement has not effect element exist in div.

instead of element use html string

var circle = "<div class='circleclass'></div>"; $(".t-testbody").on("click", "#clickme", function () {     $(".t-testbody").append(circle); }); 

demo

---

you can use .clone()

var circle = $("<div class='circleclass'></div>"); $(".t-testbody").on("click", "#clickme", function () {     $(".t-testbody").append(circle.clone()); }); 

demo