select element inside contenteditable

HTML

<article id="dynamic-storage" contenteditable="true">
    <p><br /></p>
</article>

CSS

#dynamic-storage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  outline: 0;
}

#dynamic-storage .selected {
  outline: 2px dotted #69f;
}

JavaScript

var getSelection;
if (window.getSelection) {
    // IE 9 and non-IE
    getSelection = function() {
        var sel = window.getSelection(), ranges = [];
        if (sel.rangeCount) {
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                ranges.push(sel.getRangeAt(i));
            }
        }
        return ranges;
    };
} else if (document.selection && document.selection.createRange) {
    // IE <= 8
    getSelection = function() {
        var sel = document.selection;
        return (sel.type != "None") ? sel.createRange() : null;
    };
}

$(document).ready(function() {
  // Select Elements
  var SelectElements = function() {
    $("#dynamic-storage").children().on("mouseup touchend", function() {
      if ( $(".selected").is(":visible") ) {
        $(".selected").removeClass("selected");
      }

      $(this).addClass("selected");
    });
  };
  // Clear Selection
  var ClearSelection = function() {
    $(".selected").removeClass("selected");
  };
  SelectElements();

  // Handles Hotkeys
  $(document).keyup(function(e) {
    // Up & Down Arrow Keys To Select/Deselect Element in Editable
    if (e.which === 38 || 40 )  {
        $('#dynamic-storage > div').removeClass('selected');
        var selectedElem = getSelection()[0].commonAncestorContainer.parentElement;
        $(selectedElem).closest('#dynamic-storage > div').addClass('selected');
    }
  });
    
});