Drag and Drop Menu Scrypt

$(document).ready(function () {
  $("ul.droptrue").sortable({
    connectWith: "ul"
  });
  $("ul.dropfalse").sortable({
    connectWith: "ul",
    dropOnEmpty: false
  });
  $("#sortable1, #sortable3").disableSelection();
  $("#add").click(function () {
    let title = $("#title").val();
    let link = $("#link").val();
    $("#sortable1").append(`<li class="ui-state-default border border-2 border-dark mb-1 p-2"> <div class="mb-1"><p>${title}<p><p>${link}<p></div> <button type="button" class="btn btn-danger">Delete</button> </li>`);
    $(".btn-danger").click(function () {
      $(this).parent().remove();
      $(".navbar-nav").empty();
      $(".navbar").hide();
    });
  });
  $("#generateNav").click(function () {
    $(".navbar-nav").empty();
    $(".navbar").show();
    $("#sortable3 li").each(function () {
      navTitle = ($(this).find("p:first").text());
      navLink = ($(this).find("p:nth-child(2)").val());
      $(".navbar-nav").append(`<li class="nav-item"><a href="#" class="nav-link active">${navTitle}</a></li>`);
    });
  });
});