Подсказка с городами работает в index.ejs, но не работает в модальном окне в profile.ejs:

раньше я пробовал селектор #city вместо input name, но это не помогает. Города находятся как бы за модальным окном

index.ejs:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="/css/main.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="/jquery-ui/themes/base/all.css" />
	<script src="/jquery/dist/jquery.min.js"></script>
<script src="/jquery-ui/dist/jquery-ui.min.js"></script>
    <title>Home</title>
  </head>
  <body>
    <header>
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="/">My Musician Site</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="/">Home</a>
            </li>
            <% if (userLoggedIn) { %>
            <li class="nav-item">
              <a class="nav-link" href="/profile/<%= musician.id %>">Hello, <%= username %></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/logout">Logout</a>
            </li>
            <% } else { %>
            <li class="nav-item">
              <a class="nav-link" href="/register">Register</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/login">Login</a>
            </li>
            <% } %>
          </ul>
        </div>
      </nav>
    </header>
    <main class="container mt-5">
      <div class="row">
        <div class="col-md-8">
        <!-- добавляет форму с поиском музыкантом -->
        <form method="get" action="/search">
          <div class="form-group">
            <label for="query">Search by name or genre:</label>
            <div class="input-group">
              <input id="query" name="query" type="text" class="form-control" value="<%= query %>">
              <div class="input-group-append">
                <button type="submit" class="btn btn-primary">Search</button>
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group col-md-4">
              <label for="role">Search by role:</label>
              <select id="role" name="role" class="form-control">
                <option value="">
                  All
                </option>
                <option value="Band">
                  Band
                </option>
                <option value="Artist">
                  Artist
                </option>
              </select>
            </div>
            <div class="form-group col-md-4">
              <label for="genre">Search by genre:</label>
              <select id="genre" name="genre" class="form-control">
                <option value="">
                  All
                </option>
                <option value="Rock">
                  Rock
                </option>
                <option value="Pop">
                  Pop
                </option>
              </select>
            </div>
            <div class="form-group col-md-4">
              <label for="city">Search by location:</label>
              <input id="city" name="city" type="text" class="form-control" autocomplete="on" value="<%= city %>" data-value="">
            </div>
          </div>
        </form>
        <%if (musicians.length > 0) { %>
        <h2 class="mt-5">Results:</h2>
        <ul class="list-unstyled">
        <% musicians.forEach(musician => { %>
          <li class="media my-4">
            <a href="/profile/<%= musician.id %>">
              <img src="/img/<%= musician.thumbnail || 'avatar.jpg'%>" class="mr-3" alt="Musician profile picture">
            </a>
            <div class="media-body">
              <h5 class="mt-0 mb-1"><a href="/profile/<%= musician.id %>"><%= musician.name %></h5></a>
              <p><strong>Role:</strong> <%= musician.role %></p>
              <p><strong>Genre:</strong> <%= musician.genre %></p>
              <p><strong>Location:</strong> <%= musician.city %></p>
              <p><strong>Available for gigs:</strong> <%= musician.availableForGigs ? 'Yes' : 'No' %></p>
            </div>
          </li>
        <% }) %>
        </ul>
        <% } else { %>
        <h2 class="mt-5">No results found</h2>
        <% } %>
        </div>
        <div class="col-md-4">
          <h2>About this site</h2>
          <p>Welcome to My Musician Site! This is a platform for musicians to connect with each other and find potential bandmates or collaborators. You can search for musicians by name, location, role, and genre. If you're a musician yourself, make sure to create a profile so others can find you too!</p>
          <p>If you have any questions or feedback, please don't hesitate to contact us at <a href="mailto:contact@mymusiciansite.com">contact@mymusiciansite.com</a>.</p>
        </div>
      </div>
    </main>
    <script src="/jquery/jquery.min.js"></script>
    <script src="/jquery-ui/jquery-ui.min.js"></script>
    
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1r RibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
	<script>
	$("#city").autocomplete({
    source: '/autocomplete/cities',
    minLength: 1,
  });

  const queryInput = document.querySelector("#query");
  const roleInput = document.querySelector("#role");
  const cityInput = document.querySelector("#city");

  queryInput.value = "<%= query %>";
  roleInput.value = "<%= role %>";
  cityInput.value = cityInput.getAttribute('data-value');

  const query = queryInput.value;
  const role = roleInput.value;
  const city = cityInput.value;
	</script>
  </body>
</html>

profile.ejs:

<!DOCTYPE html>
<html>
  <head>
    <title><%= musician.name %> - Musician Profile</title>
	<link rel="stylesheet" href="/jquery-ui/themes/base/all.css" />
	<script src="/jquery/dist/jquery.min.js"></script>
<script src="/jquery-ui/dist/jquery-ui.min.js"></script>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 
  <!-- Popper.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <!-- Bootstrap JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  
  <!-- Custom CSS -->
  <link rel="stylesheet" href="/css/main.css" />


  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-3">
          <img src="/img/<%= musician.thumbnail || 'avatar.jpg' %>" alt="<%= musician.name %>" width="200" height="200">
        </div>
        <div class="col-md-8">
          <h1><%= musician.name %></h1>
          <p><strong>Role:</strong> <%= musician.role %></p>
          <p><strong>Genre:</strong> <%= musician.genre %></p>
          <% if (musician.role === 'Artist' && musician.instrument) { %>
            <p><strong>Instrument:</strong> <%= musician.instrument %></p>
          <% } %>
          <p><strong>Location:</strong> <%= musician.city %></p>
          <p><strong>Bio:</strong> <%= musician.bio %></p>
          <% if (musician.soundcloud) { %>
            <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src="https://w.soundcloud.com/player/?url=<%= musician.soundcloud %>&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
            </div>
          <% } %>
          <% if (musician.soundcloud1) { %>
            <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src="https://w.soundcloud.com/player/?url=<%= musician.soundcloud1 %>&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
            </div>
          <% } %>
          <% if (userLoggedIn && username === musician.name) { %>
            <button type="button" class="btn btn-primary mt-3 mb-3" data-toggle="modal" data-target="#edit-profile-modal">Edit Profile</button>
            <div id="edit-profile-modal" class="modal fade">
              <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                  <div class="modal-header">
                    <h4 class="modal-title">Edit Profile</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                  </div>
                  <div class="modal-body">
                    <form action="/profile/<%= musician.id %>/edit" method="POST" enctype="multipart/form-data">
                      <div class="form-group">
                        <label for="name">Name:</label>
                        <input type="text" id="name" name="name" value="<%= musician.name %>" class="form-control">
                      </div>
                      <div class="form-group">
                        <label for="role">Role:</label>
                        <select id="role" name="role" class="form-control">
                          <option value="">Select a role</option>
                          <option value="Band" <%= musician.role === 'Band' ? 'selected' : '' %>>Band</option>
                          <option value="Artist" <%= musician.role === 'Artist' ? 'selected' : '' %>>Artist</option>
                        </select>
                      </div>
                      <div class="form-group">
                        <label for="genre">Genre:</label>
                        <select id="genre" name="genre" class="form-control">
                          <option value="">Select a genre</option>
                          <option value="Rock" <%= musician.genre === 'Rock' ? 'selected' : '' %>>Rock</option>
                         <option value="Pop" <%= musician.genre === 'Pop' ? 'selected' : '' %>>Pop</option>
                          <option value="Hip-hop" <%= musician.genre === 'Hip-hop' ? 'selected' : '' %>>Hip-hop</option>
                          <option value="Jazz" <%= musician.genre === 'Jazz' ? 'selected' : '' %>>Jazz</option>
                          <option value="Electronic" <%= musician.genre === 'Electronic' ? 'selected' : '' %>>Electronic</option>
                          <option value="Classical" <%= musician.genre === 'Classical' ? 'selected' : '' %>>Classical</option>
                        </select>
                      </div>
                      <% if (musician.role === 'Artist') { %>
                        <div class="form-group">
                          <label for="instrument">Instrument:</label>
                          <input type="text" id="instrument" name="instrument" value="<%= musician.instrument || '' %>" class="form-control">
                        </div>
                      <% } %>
                      <div class="form-group">
                        <label for="city">Location:</label>
                        <input id="city" name="city" type="text" autocomplete="on" value="<%= city %>" data-value="" class="form-control">
                      </div>
                      <div class="form-group">
                        <label for="bio">Bio:</label>
                        <textarea id="bio" name="bio" class="form-control"><%= musician.bio %></textarea>
                      </div>
                      <div class="form-group">
                        <label for="thumbnail">Thumbnail:</label>
                        <input type="file" id="thumbnail" name="thumbnail" accept="image/*" class="form-control-file">
                      </div>
                      <div class="form-group">
                        <label for="soundcloud">Soundcloud Track:</label>
                        <input type="text" id="soundcloud" name="soundcloud" value="<%= musician.soundcloud || '' %>" class="form-control">
                      </div>
                      <div class="form-group">
                        <label for="soundcloud1">Soundcloud Track 2:</label>
                        <input type="text" id="soundcloud1" name="soundcloud1" value="<%= musician.soundcloud1 || '' %>" class="form-control">
                      </div>
                      <button type="submit" class="btn btn-primary">Save Changes</button>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          <% } %>
        </div>
      </div>
    </div>
  
	
	 <script>
      
 const modal = document.getElementById("edit-profile-modal");
      const btn = document.getElementsByTagName("a")[0];
      const span = document.getElementsByClassName("close")[0];

      btn.onclick = function() {
        modal.style.display = "block";
      }

      span.onclick = function() {
        modal.style.display = "none";
      }

      window.onclick = function(event) {
        if (event.target == modal) {
          modal.style.display = "none";
        }
      }
	  
	  //скрыть плеер, если ссылка не внесена
	const song1Input = document.getElementById("soundcloud");
const song2Input = document.getElementById("soundcloud1");
const player1 = document.getElementsByTagName('iframe')[0];
const player2 = document.getElementsByTagName('iframe')[1];
let songs = {
  song: "",
  song1: ""
}

function hidePlayer(player) {
    player.src = "";
    player.style.display = "none";
}

function updateSongs() {
  songs.song = song1Input.value.trim();
  songs.song1 = song2Input.value.trim();
}

function updatePlayers() {
  if (songs.song !== "") {
    player1.src = `https://w.soundcloud.com/player/?url=${songs.song}&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`;
    player1.style.display = "block";
  } else {
    hidePlayer(player1);
  }

  if (songs.song1 !== "") {
    player2.src = `https://w.soundcloud.com/player/?url=${songs.song1}&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`;
    player2.style.display = "block";
  } else {
    hidePlayer(player2);
  }
}

song1Input.addEventListener("input", function() {
  updateSongs();
  updatePlayers();
});

song2Input.addEventListener("input", function() {
  updateSongs();
  updatePlayers();
});

updateSongs();
updatePlayers();
//Валидация ссылок с soundcloud
function updatePlayers() {
  if (isValidSoundcloudUrl(songs.song)) {
    player1.src = `https://w.soundcloud.com/player/?url=${songs.song}&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`;
    player1.style.display = "block";
  } else {
    hidePlayer(player1);
  }

  if (isValidSoundcloudUrl(songs.song1)) {
    player2.src = `https://w.soundcloud.com/player/?url=${songs.song1}&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`;
    player2.style.display = "block";
  } else {
    hidePlayer(player2);
  }
}

function isValidSoundcloudUrl(url) {
  const regex = /^https?:\/\/(soundcloud\.com|snd\.sc)\/(.*)$/;
  return regex.test(url);
}
    </script>
	<script>
	$("input[name='city']").autocomplete({
    source: '/autocomplete/cities',
    minLength: 1,
  });

  const queryInput = document.querySelector("#query");
  const roleInput = document.querySelector("#role");
  const cityInput = document.querySelector("input[name='city']");

  queryInput.value = "<%= query %>";
  roleInput.value = "<%= role %>";
  cityInput.value = cityInput.getAttribute('data-value');

  const query = queryInput.value;
  const role = roleInput.value;
  const city = cityInput.value;
	</script>
	
	
  </body>
</html>