jQuery API fetch request is not working. Console log shows working link. Link has results. What am I missing?

I am setting up a request to a brewery API. Simple code and it looks fine I have tried to troubleshoot it. I cannot figure out what the error is. Here is the js file that logs a working link but no fetch results

So this is the link to the repl, which should make it easier.

'use strict';

function getBreweries(state) {
  const url = `https://api.openbrewerydb.org/breweries/search?query=${state}`;
  console.log(url)
  fetch(url)
  .then(response => response.json())
  .then(responseJson => {
    displayResults(responseJson)
  }
    );
  
}

function displayResults(responseJson) {
  console.log(responseJson);
  for (let i=0; i< responseJson.length; i++){
    console.log(responseJson[i].name);
    $('#js-search-results').html(responseJson[i].name);
  }

}

function watchForm() {
$('form').submit(event =>{
  const stateRaw = $('#js-query').val();
  const stateArray = stateRaw.split(" ");
  const state = stateArray.join("_");
  console.log(state);
  getBreweries(state);
})
}

$(watchForm);

and here, we have the html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <script
          src="https://code.jquery.com/jquery-3.2.1.min.js"
          integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
          crossorigin="anonymous"></script>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1>Find a brewery</h1>
    <form action="#" id="js-search-form">
      <label for="state-entry">Search by state:</label>
      <input type="text" id="js-query" placeholder="New York">
      <input type="submit" value="Search"></input>
    </form>
    <section id="js-search-results">
            
    </section>
    <script src="index.js"></script>
  </body>
</html>

Solution

A couple things.

You need to add event.preventDefault() in watchForm() to prevent the form element from attempting its default action (sending a request to the path entered in the action attribute).
Change $('#js-search-results').html(); to $('#js-search-results').append();. Otherwise you're gunna overwrite the previous result on every loop.

Example:

'use strict';

function getBreweries(state) {
  const url = `https://api.openbrewerydb.org/breweries/search?query=${state}`;
  console.log(url)
  fetch(url)
  .then(response => response.json())
  .then(responseJson => {
    displayResults(responseJson)
  }
    );
  
}

function displayResults(responseJson) {
  console.log(responseJson);
  $('#js-search-results').html("<ul></ul>")
  for (let i=0; i< responseJson.length; i++){
    console.log(responseJson[i].name);
    $('#js-search-results ul').append("<li>" + responseJson[i].name + "</li>");
  }

}

function watchForm() {
$('form').submit(event =>{
  event.preventDefault();
  const stateRaw = $('#js-query').val();
  const stateArray = stateRaw.split(" ");
  const state = stateArray.join("_");
  console.log(state);
  getBreweries(state);
})
}

$(watchForm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <h1>Find a brewery</h1>
<form action="#" id="js-search-form">
  <label for="state-entry">Search by state:</label>
  <input type="text" id="js-query" placeholder="New York">
  <input type="submit" value="Search"></input>
</form>
<section id="js-search-results">

</section>