Javascript 使用jqueryclone语句复制div标记，当使用新复制的div时，js会错误地执行该操作

使用jquery的clone语句复制div标记，但是使用先前编写的内部标记的js语句不能正确使用新复制的div标记

HTML:

jsfiddle.net中的完整代码：

---

这里是正确的代码。小提琴演示-

}))

<div class="panels">
  <div class="panel">
    <div class="sona-icon-selected">
      <a class="btn-select-icon">Click to show icons</a>
    </div>
    <div class="sona-icon-selector">
      <p>
      Please, select an icon you want!
      </p>
    </div>
  </div>
   <div class="panel">
    <div class="sona-icon-selected">
      <a class="btn-select-icon">Click to show icons</a>
    </div>
    <div class="sona-icon-selector">
      <p>
      Please, select an icon you want!
      </p>
    </div>
  </div>
  <div class="btns">
    <a class="btn_clone">Clone Panel</a>
  </div>  
</div>

$('.panel').each(function(){
    var $$ = $(this),
        $selected = $$.find('.sona-icon-selected'),
        $btn_show = $$.find('.btn-select-icon'),
      $selector = $$.find('.sona-icon-selector');
  $btn_show.off('click').on('click', function(){
    $selector.slideToggle();
  });
});
$('.panels').each(function(){
  var $$ = $(this), $btn_clone = $$.find('.btn_clone');
  $btn_clone.off('click').on('click', function(){
    var $newPanel = $$.find( '.panel:last' ).clone( true );
    $newPanel.insertAfter($$.find( '.panel:last' ));
  });
 });

$('.btn_clone').on('click',function(){
  var $newPanel = $('.panels').find( '.panel:last' ).clone( true );
  $newPanel.insertAfter($('.panels').find( '.panel:last' ));
 $('.btn-select-icon').off('click').on('click',function(){
    console.log($(this).closest('.panel').find('.sona-icon-selector'));
    $(this).closest('.panel').find('.sona-icon-selector').slideToggle();
 });

$('.btn-select-icon').on('click',function(){
        console.log($(this).closest('.panel').find('.sona-icon-selector'));
        $(this).closest('.panel').find('.sona-icon-selector').slideToggle();
  });