'fetch api not reinstating search values

Hello everyone it seems that nobody has been able to walk me through in regards to a fetch issue I am having.

I am building up a library using the google api but here is the catch, if I search for "Harry"(Using Harry for explaining purposes) it does show up some books BUT if I search again letś say "Potter" then both search requests pile up and i just need the first search to flush out and the second search result to show up instead I am filling up the SEARCH BOOKS TEMPLATE and do not have the slightest idea on how to go about getting this fixed

first search

second search

Pug:

extends ./index.pug
block contentt
  #categContainer
    h3 Elige a continuación unas de las categorias para poder filtrar tu busqueda adecuadamente
    ul#categories 
      button.btn.btn-autor.btn-outline-info.categories(
        type="button",
        onclick="agregarAutor()"
      ) Autor
      button.btn.btn-libro.btn-outline-info.categories(
        type="button",
        onclick="agregarLibro()"
      ) Libros
      button.btn.btn-revista.btn-outline-info.categories(
        type="button",
        onclick="agregarCategoria()"
      ) Categoria
      button.btn.btn-titulo.btn-outline-info.categories(
        type="button",
        onclick="agregarTitulo()"
      ) titulo
      button.btn.btn-editorial.btn-outline-info.categories(
        type="button",
        onclick="agregarEditorial() "
      ) Casa editora
      button.btn.btn-gratis.btn-outline-info.categories(
        type="button",
        onclick="agregarFree()"
      ) Libros gratuitos
      button.btn.btn-pagas.btn-outline-info.categories(
        type="button",
        onclick="agregarPaid()"
      ) Libros pagos
  div
    label(for="category_type")
    input.input(type="text", name="category_type")
    button.btn.btn-outline-primary.choice(onclick="restartItems()") Elige tu categoria
  #category_reveil

JS

var acumulado = [];
var input_el = document.querySelector(".input");
valor = input_el;
valor.innerHTML = "";
var autorcito = document.querySelector(".btn-autor");
var librito = document.querySelector(".btn-libro");
var revistica = document.querySelector(".btn-revista");
var titulacho = document.querySelector(".btn-titulo");
var editoriale = document.querySelector(".btn-editorial");
var free = document.querySelector(".btn-gratis");
var paid = document.querySelector(".btn-pagas");
function agregarAutor() {
  acumulado.push("Autor");
  console.log(acumulado);
  autorcito.disabled = true;
}
function agregarLibro() {
  acumulado.push("Libro");
  console.log(acumulado);
  librito.disabled = true;
}
function agregarCategoria() {
  acumulado.push("Categoria");
  console.log(acumulado);
  revistica.disabled = true;
}
function agregarTitulo() {
  acumulado.push("Titulo");
  console.log(acumulado);
  titulacho.disabled = true;
}
function agregarEditorial() {
  acumulado.push("Editorial");
  console.log(acumulado);
  editoriale.disabled = true;
}
function agregarFree() {
  acumulado.push("Gratis");
  console.log(acumulado);
  free.disabled = true;
}
function agregarPaid() {
  acumulado.push("Pagos");
  console.log(acumulado);
  paid.disabled = true;
}
function restartItems() {
  autorcito.disabled = false;
  librito.disabled = false;
  revistica.disabled = false;
  titulacho.disabled = false;
  editoriale.disabled = false;
  free.disabled = false;
  paid.disabled = false;
  acumulado = [];
  console.log(acumulado);
  fetch(`https://www.googleapis.com/books/v1/volumes?q=${valor}`)
    .then((data) => {
      return data.json();
    })
    .then((response) => {
      for (var i = 0; i < response.items.length; i++) {
        var item = response.items[i].volumeInfo.title;
        var new_item_list = document.createElement("a");
        var new_item = document.createElement("div").appendChild(new_item_list);
        new_item.classList.add("div_categ_style");
        var item = response.items[i];
        document
          .querySelector("#category_reveil")
          .appendChild(new_item).innerHTML += "<br>" + item.volumeInfo.title;
      }
    });
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source