I’m working on this page where I have some custom JS/jQuery to add a search feature for a list. I need to be able to “add” an additional field if required. I had it working before implementing the search feature, but now it’s become a lot for convoluted. I think I need to use a “closest” or an “each” somewhere in here, but I’ve been banging my head on it so long I’m not thinking straight…
Any help is appreciated!

html:

<form action="https://bailbuddy.ticketdawg.com/" method="get" target="_parent" name="inmateInfo" id="inmateInfo">
  <div id="chargeGroups">
    <label>Charges: </label>
    <div class="search-dropdown group" id="chargeGroup1" name="charge1">
      <div class="dropdown-display" id="dropdownDisplay">
        <span>Select Charge</span>
        <input name="chargehide" type="hidden" id="hiddenCharge">
      </div>
      <div class="dropdown-content" id="dropdownContent">
        <input type="text" placeholder="Search..." id="chargeSearch1" class="search-input">
        <ul id="charge" name="charge">
          
        </ul>
      </div>
    </div>
  </div>

  <button id="addMore">Add Charge</button>
  <form/>

script:

  $(function() {
    let count = 1;
    $("#addMore").click(function(e) {
      count++;
      var newChargeGroup = $("#chargeGroup1").clone().attr({
        id: "chargeGroup" + parseInt(count), 
        name: "charge" + parseInt(count)
      });
      newChargeGroup.val("");
      $("#chargeGroups").append(newChargeGroup);
    });

    document.getElementById("addMore").addEventListener("click", function(event){
      event.preventDefault()
    });

    $(document).ready(function () {
      $('#dropdownDisplay').on('click', function () {
        $('#dropdownContent').toggle();
      });

      $('#chargeSearch' + parseInt(count)).on('input', function () {
        let value = $(this).val().toLowerCase();
        $('#charge li').filter(function () {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
        });
      });

      /* $('.charge').on('click', 'li', function (e) {
          //$(e.target).closest('span').text($(this).text());
          $('#dropdownDisplay > span').text($(this).text());
          $('#hiddenCharge').val($(this).text());
          $('#dropdownContent').hide();
        });*/
      $('.charge').on('click', 'li', function (e) {
        //$(e.target).closest('span').text($(this).text());
        $('#dropdownDisplay > span').text($(this).text());
        $('#hiddenCharge').val($(this).text());
        $('#dropdownContent').hide();
      });

      $(document).on('click', function (e) {
        if (!$(e.target).closest('.search-dropdown').length) {
          $('#dropdownContent').hide();
        } else {
            $("#chargeSearch1").focus();
        }
        
      });
    });
    
    // populate charges
    const chargeSelect = document.getElementById("charge");
    for (let state in myCharges) {
      let opt = document.createElement('li');
      opt.innerHTML = state;
      chargeSelect.appendChild(opt);
    }


  });

  const myCharges = {
  "this charge":"",
    "second charge":"",
      "third charge":"",
    };

and style:

form .group {
    display: table;
    width: 100%;
}

form p.group label,
form div.group label {
    display: table-cell;
    width: 20%;
}

form p.group input,
form p.group select {
    /* display: table-cell; */
    width: 100%;
}

.terms-section {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 1em;
}

#selectCharges>select {}

#addMore {
    margin: auto auto 1em;
    display: table-cell;
    text-align: center;
}

#termsCheck {
    cursor: pointer;
}

#scrollable {
    border: solid 1px;
    height: 100px;
    margin: 1em auto;
    padding: 10px;
    overflow-y: scroll;
}

.close {
    position: absolute;
    color: #fff;
    top: 0;
    right: 0;
    padding: 2px 10px;
    margin: 5px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50px;
    cursor: pointer;
}

#popup {
    display: none;
    font-size: 1em;
    position: absolute;
    top: 0;
    width: 80%;
    max-width: 400px;
    height: 20em;
    padding: 20px;
    margin: auto;
    border: 1px solid;
    background: #eee;
    overflow-y: scroll;
    z-index: 101;
}

#mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: none;
    z-index: 100;
}

.search-dropdown {
    margin-bottom: 1em;
}

.dropdown-display {
    /* width: 75%; */
    /* display: table-cell; */
    padding: 0 6px 1px;
    border: 1px solid #bbb;
    cursor: pointer;
}

.dropdown-content {
    display: none;
}

.dropdown-content .search-input {
    display: table-cell;
    width: 100%;
    margin: 1em 5% 0 0;
}

.dropdown-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: inline-block;
    padding-top: 1em;
    width: 100%;
}

.dropdown-content ul li {
    padding: 0 10px;
    cursor: pointer;
    border: 1px solid #bbb;
    /* display: table-header-group; */
}

.dropdown-content ul li:not(:first-child) {
    border-top: 0;
}

.dropdown-content ul li:hover {
    background-color: #f1f1f1;
}

here’s a fiddle