RemoveClass, а затем addClass не работает

Когда я нажимаю на div, этот div покрывается черной линией.

Но когда я нажимаю на любой другой div, мне нужен старый div, чтобы удалить эти черные линии, и только у current div должна быть граница. Ниже приведен код, которому я пытаюсь следовать:

var addDiv = document.getElementById("addDiv");

addDiv.addEventListener("contextmenu", function(event) {
  event.preventDefault();

  if ($(event.target).hasClass('context_menu')) {
    $(event.target).siblings('.clickedDiv').removeClass('clickedDiv');
    $(event.target).addClass('clickedDiv');
    console.info($(event.target).addClass('clickedDiv'));
  } else {
    $(event.target).parent().addClass('clickedDiv');
  }

  $("#ctxMenu").css({
    'top': event.pageY,
    'left': event.pageX
  }); // only this line to be added
  $("#ctxMenu").show();
}, false);

addDiv.addEventListener("click", function(event) {
  $("#ctxMenu").hide();
}, false);

Приведенный выше код запускается при щелчке правой кнопкой мыши.

Я хочу, чтобы когда я щелкнул правой кнопкой мыши div с идентификатором #addDiv, он должен удалить класс 'clickedDiv` отовсюду, а затем продолжить код, чтобы добавить класс в выбранный div.

Мой html-код:

<div id = "addDiv" [innerHtml] = "divCode | noSanitize"></div>
<div id = "ctxMenu" style = "display:none">
  <ul id = "ctxImage" style = "display:none">
    <li (click) = "clone()">Clone</li>
    <li (click) = "changeImg()">Change Image</li>
  </ul>
</div>