jQuery обработчики событий и проблемы параллелизма с созданием временных новых элементов

Question

По сути, у меня есть список, и я могу sh, чтобы пользователи могли добавлять в него элементы. Это нечто базовое c, например:

Всякий раз, когда пользователь нажимает кнопку «плюс», появляется новый ввод, и если пользователь THEN Если щелкнуть где-либо еще, ввод должен исчезнуть и заменить его новым элементом span (еще не на этапе замены). Мой код в настоящее время выглядит так:

var toggleBtn = `<i class="fas fa-caret-down"></i>`
var newUL = `<ul class='active'></ul>`

//toggle tree view
//for outer layer
$("ul").on("click", ".fa-caret-down", function(){
  $(this).parent().toggleClass("caret-down");
  $(this).closest("li").find(".active").toggleClass("nested");
})
//for sublayer
$(".active").on("click", ".fa-caret-down", function(){
  $(this).parent().toggleClass("caret-down");
  $(this).closest("li").find(".active").toggleClass("nested");
})

//add new element
$(".fa-plus-square").on("click", function(){
//if there's no new list, create a new unordered list
  if ($(this).closest("li").find("ul").length == 0){
    $(this).parents("li").append(newUL);
    //and add toggle button
    $(this).parent().prepend(toggleBtn);
  }
  //add the element
  addElement($(this));
})

function addElement(a){
  a.closest("li").find("ul").append("<li><input id='newInput' value='sub_element'></li>")
  $("#newInput").select();

  /////problem?/////
  $(document).click(function(e) {
    //user clicked on something else
    if ( e.target.id != 'newInput' ) {
      var value = $("#newInput").val();
      console.log(value);
      $("input").remove();
    }
  })
  /////problem?/////

}

ul, #myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
}

.fa-caret-down,
.fa-plus-square{
  cursor: pointer;
  user-select: none;
  color: grey;
}

.caret-down .fa-caret-down{
  transform: rotate(270deg);
}

.active {
  display: block;
}

.nested {
  display: none;
}

.editor{
  display: grid;
  grid-template-areas: 'a b b'
                      'c c c';
}

.triggerDetail{
  width: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/8b6dca0357.js" crossorigin="anonymous"></script>
<div class="triggerList">
  <ul id="myUL">
    <li><span class="caret caret-down"><i class="fas fa-caret-down"></i>Parent</span>
      <ul class="active">
        <li class="addable">
            <span>Element  <i class="fas fa-plus-square"></i></span>
        </li>
        <li class="addable"><span>Element  <i class="fas fa-plus-square"></i></span></li>
        <li class="addable"><span>Element  <i class="fas fa-plus-square"></i></span></li>
      </ul>
    </li>
      <li><span class="caret caret-down"><i class="fas fa-caret-down"></i>Parent</span>
        <ul class="active">
          <li class="addable"><span class="caret caret-down">Element  <i class="fas fa-plus-square"></i></span>
          </li>
          <li class="addable"><span>Element  <i class="fas fa-plus-square"></i></span>
          </li>
          <li class="addable"><span>Element  <i class="fas fa-plus-square"></i></span>
          </li>
        </ul>
      </li>
    </ul>
</div>

Но проблема сейчас в том, что я нажимаю кнопку «плюс», но обработчик событий в addElement () уже выполняется. Значение регистрируется в консоли. Входные данные, вероятно, созданы и немедленно удалены.

Я попробовал обещание (). Done (function () {}), потому что раньше я сталкивался с проблемами параллелизма с анимацией, и это было решением. И похоже, что это работает только на анимации. Я попробовал метод в этом ответе , и он не сработал (очевидно, но подумал, что я бы попробовал. Возможно, я неправильно его настроил?)

Идеальная последовательность:

Сначала нажмите кнопку «плюс» -> созданный и выбранный вход -> ждать, пока пользователь не щелкнет где-либо еще -> удалить элемент ввода.

Текущая последовательность:

Сначала нажмите на кнопку Кнопка плюс -> выполняется до конца, ввод и удаление введены.