Autocomplete – populating textbox when clicked issue Javascript

I’ve been working on the autocomplete feature for a webpage. Autocomplete function is running fine, but whenever I click on one of the suggestions, it only selects the first thing on the list as it populates the textbox. Even after clicking, for instance, the second or third suggestion, it only selects the first suggestion. The first event is the autocomplete while the second event is the click function and populating the text box when item is selected. My issue is the click event, I’m thinking of creating another loop, like the one for the autocomplete event. However, would it be redundant to do that in the click event as well? Here’s the code that I’m working on. Please, no JQuery, innerHTML or innerText. I’m strictly using pure JS. Thank you!

document .getElementById("title").addEventListener("keyup", function autoComplete(e) {
  let searchvalue = e.target.value;
  let suggestionBox = document.querySelector(".suggestions");
  suggestionBox.textContent = "";

  if (searchvalue.length > 2) {
    let titles = movData.filter((title) => {
      return title.title.toLowerCase().startsWith(searchvalue);
    });
    titles.forEach(function (suggested) {
      let div = document.createElement("li");
      div.textContent = suggested.title;
      suggestionBox.append(div);
    });
    if (searchvalue === "") {
      suggestionBox.textContent = "";
    }
  }
});

document.querySelector("#header-mobi").addEventListener("click", function select() {
  if (document.querySelector(".suggestions > li")) {
    document.getElementById("title").value =
      document.querySelector(".suggestions > li").textContent;
  }
});

<div id="main">
  <div class="form-center">
    <form id="header-mobi">
      <div class="header">
        <p>Movie Browser</p><br /><br />
      </div>
      <h1 id="title1">Enter Movie Title:</h1>
      <input type="text" title="title" id="title" name="title" placeholder="Movie Title"
      />
      <div class="suggestions"></div>
      <br />
      <button type="button" id="matching-btn" class="button button1">
        Show Matching Movies
      </button>
      <button type="button" id="all-btn" class="button button2">
        Show All Movies
      </button>
    </form>
  </div>