Не работает выделение с щелчка мыши

var buffer = [] 
$('#d').selectable({ 
  filter: ".a2", 
  start: selStart, 
  selecting: selSelecting, 
  unselecting: unSelecting, 
  selected: selSelected, 
  stop: selStop 
}); 
$('.a2').resizable({ 
  handles: "all", 
  start: function(event, ui) { 
    buffer['start resize'] = true; 
  }, 
  stop: function() { 
    buffer['start resize'] = false; 
  }, 
  enable: true 
}); 
$('.a2').draggable({ 
  cursor: "move", 
  containment: 'parent', 
  start: function(event, ui) { 
    buffer['start single drag'] = ui.helper; 
  }, 
  stop: function(event, ui) { 
    buffer['start single drag'] = false; 
  } 
}); 
 
function selStart(event, ui) { 
  //console.log('selStart') 
} 
 
function selSelecting(event, ui) { 
  if (event.ctrlKey) { 
    if (!$(ui.selecting).hasClass("ui-state-disabled")) { 
      $(ui.selecting).removeClass("ui-selecting") 
    } 
  } 
  //console.log('selSelecting') 
} 
 
function unSelecting(event, ui) { 
  //console.log('unSelecting') 
} 
 
function selSelected(event, ui) { 
 
  multiDraggable() 
  //console.log('selSelected') 
} 
 
function enableResize(o, flag) { 
  o.resizable(flag ? 'enable' : 'disable'); 
  o.resizable('option', 'enable', flag); 
  o.resizable('option', 'disable', !flag); 
} 
 
function selStop() { 
  $.each($('.ui-selected'), function(key, value) { 
    enableResize($(value), true); 
  }); 
  $.each($('.ui-selectee').not('.ui-selected'), function(key, value) { 
    enableResize($(value), false); 
  }); 
} 
 
function multiDraggable() { 
  var s = $('.ui-selected'); 
  if (s.length <= 1) { 
    $('.a2').draggable({ 
      containment: 'parent', 
      start: function(event, ui) { 
        buffer['start single drag'] = ui.helper; 
      }, 
      drag: function() { 
        return true; 
      }, 
      stop: function(event, ui) { 
        buffer['start single drag'] = null; 
      } 
    }); 
    return; 
  } 
  var initLeftOffset = [], 
    initTopOffset = []; 
  var mx = $('#d').position(); 
  mx.left++; 
  mx.top++; 
  var wh = [$('#d').width() - 2, $('#d').height() - 2]; 
  $('.ui-selected').draggable({ 
    start: function(event, ui) { 
      if (!$(this).hasClass('ui-selected')) 
        return; 
      var pos = $(this).position(); 
      $.each($('.ui-selected'), function(key, value) { 
        var elemPos = $(value).position(); 
        initLeftOffset[key] = elemPos.left - pos.left; 
        initTopOffset[key] = elemPos.top - pos.top; 
      }); 
      buffer['start drag'] = true; 
    }, 
    drag: function(event, ui) { 
      if (!$(this).hasClass('ui-selected')) 
        return; 
      var pos = $(this).offset(); 
      $.each($('.ui-selected') || {}, function(key, value) { 
        var elemPos = $(value).position(); 
        var l = pos.left + initLeftOffset[key]; 
        var t = pos.top + initTopOffset[key]; 
        l = l < mx.left ? mx.left : l; 
        t = t < mx.top ? mx.top : t; 
        if (l > elemPos.left || t > elemPos.top) { 
          var w = [$(value).width(), $(value).height()]; 
          l = l + w[0] > mx.left + wh[0] ? mx.left + wh[0] - w[0] : l; 
          t = t + w[1] > mx.top + wh[1] ? mx.top + wh[1] - w[1] : t; 
        } 
        $(value).offset({ 
          left: l, 
          top: t 
        }); 
      }); 
    }, 
    stop: function(event, ui) { 
      buffer['start drag'] = false; 
    } 
  }) 
} 
$('.a2').mouseup(containerMouseup); 
 
function containerMouseup(obj) { 
  if (buffer['start resize']) { 
    return; 
  } 
  if (buffer['start drag'] && $(obj.currentTarget).hasClass('ui-selected')) { 
    return; 
  } 
  if (obj.ctrlKey) { 
    if ($(obj.currentTarget).hasClass('ui-selected')) { 
      $(obj.currentTarget).removeClass('ui-selected'); 
      $(obj.currentTarget).resizable('disable'); 
    } else { 
      $(obj.currentTarget).addClass('ui-selected'); 
      $(obj.currentTarget).resizable('enable'); 
    } 
  } else { 
    var _obj = buffer['start single drag'] ? buffer['start single drag'] : $(obj.currentTarget); 
    _obj.resizable('enable'); 
    $('.a2').removeClass('ui-selected'); 
    $('.a2').not(_obj).resizable('disable'); 
    _obj.addClass('ui-selected'); 
  } 
} 
containerMouseup({ 
  currentTarget: $('#d1') 
}); 
/// удаление выбранного дива 
$('.button').click(function() { 
  $('.ui-selected').remove(); 
}); 
 
///добавление нового дива 
$('.button1').click(function() { 
 
  var elm = $('<div id="divId" class="a2"></div>'); 
  elm.appendTo('#d'); 
 
  elm.resizable({ 
    handles: "all", 
    start: function(event, ui) { 
      buffer['start resize'] = true; 
    }, 
    stop: function() { 
      buffer['start resize'] = false; 
    }, 
    enable: false 
  }); 
  elm.draggable({ 
    cursor: "move", 
    containment: 'parent', 
    start: function(event, ui) { 
      buffer['start single drag'] = ui.helper; 
    }, 
    stop: function(event, ui) { 
      buffer['start single drag'] = false; 
    } 
  }); 
});

.a1 { 
  width: 100%; 
  height: 600px; 
  border: 1px solid red; 
} 
 
.a2 { 
  position: absolute; 
  width: 40px; 
  height: 40px; 
  border: 1px solid gray; 
} 
 
.ui-selected { 
  border: 1px solid orange; 
} 
 
.ui-selecting { 
  border: 1px solid rgba(255, 180, 0, 0.5); 
} 
 
.ui-state-disabled { 
  opacity: 1; 
} 
 
#d1 { 
  z-index: 1; 
  left: 100px; 
  top: 150px; 
} 
 
#d2 { 
  z-index: 2; 
  left: 50px; 
  width: 200px; 
  height: 100px; 
  top: 100px 
} 
 
#d3 { 
  z-index: 3; 
  left: 150px; 
  top: 150px; 
} 
 
#d4 { 
  z-index: 4; 
  left: 300px; 
  top: 500; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<div id="d" class="a1"> 
  <div id="d1" class="a2"> 
    lolka 
  </div> 
  <input type="button" class="button" value="delete"> 
  <input type="button" class="button1" value="add"> 
</div>