javascript - my JS work on second click -

this js. dont know why "x" created append last child doesn't work on first click, work on second click. "x" url in cloned div. causing problem? or there wrong in html?

$(document).ready(function () {      $(".add").click(function () {          var aaa = $(this).parent("div").attr('id')          $(this).parent().children(".add").siblings(".name,.detail,.price").clone().appendto(".cart").wrapall('<div class="dump ' + aaa + '"></div>')          $(this).removeclass("add").addclass("added");          $(".dump:last-child").append('<a class="delc" href="javascript:delc()">x</a>');          $(".dump").removeclass("dump")      });    })    ////////////////  function delc() {      $(document).on('click', '.delc', function () {          var xx = $(this).parent("div").attr('class')          $("." + xx + "").remove()      })  }

<div id="itema">      <div class="detail">usb</div>      <div class="name">usb type1</div>      <div class="price">1500</div>      <div class="weight">20 gr</div>  <a class="add">add</a>    </div>  <div id="itemb">      <div class="detail">ram</div>      <div class="name">ram type1</div>      <div class="price">2000</div>      <div class="weight">50 gr</div>  <a class="add">add</a>    </div>  <div class="cart"></div>

you dont need separate function called on href. can bind click function.

$(document).on('click', '.delc', function(e){         e.preventdefault();         var xx = $(this).parent("div").attr('class')     $("."+xx+"").remove()     }) 

working jsfiddle http://jsfiddle.net/j65uex6t/