Why are prevButton and nextButton removed from past queries once a new query is made?

let page = 1;
let allResults = JSON.parse('{{ result|tojson|safe }}');
let itemsPerPage = 1;
var queryId = 0;
let queryState = null;

// Retrieve the existing data
let storedData = sessionStorage.getItem('resultsHistory');

// If there's no existing data, create a new object
// Otherwise, parse the existing data
let resultsHistory = storedData ? JSON.parse(storedData) : {};

window.onload = function() {
  var container = document.querySelector('.container');
  container.scrollTop = container.scrollHeight;

  fetchData();

}

function renderState(queryState) {
  // Check if the state object exists
  if (queryState) {
    // Render the state
    console.log('Query state')
    console.log(resultsHistory);
  } else {
    console.error('No state found for queryId: ' + queryId);
  }
}

function fetchData() {
  // Get the queryId from localStorage
  queryId = localStorage.getItem('queryId');
  if (queryId === null) {
    queryId = 0;
  } else {
    queryId = parseInt(queryId);
  }

  queryId++;
  console.log('Current queryId: ' + queryId);

  // Save the queryId to localStorage
  localStorage.setItem('queryId', queryId.toString());
  let data = allResults.slice()
  queryState = {
    total_pages: Math.ceil(data.length / itemsPerPage),
    current_page: 1,
    results: data,
    queryId: queryId
  };

  resultsHistory[queryId] = queryState;
  console.log(resultsHistory[queryId]);

  // Store the updated history
  sessionStorage.setItem('resultsHistory', JSON.stringify(resultsHistory));

  var queryDiv = document.querySelector('.query');
  if (!queryDiv) {
    // If no 'queryDiv' exists, create a new one
    queryDiv = document.createElement('div');
    queryDiv.className = 'query';
    queryDiv.id = 'query' + queryId;
    document.querySelector('.container').appendChild(queryDiv);
  }

  // Check if a 'buttonsContainer' already exists
  var buttonsContainer = document.querySelector('.buttonsContainer');
  if (!buttonsContainer) {
    // If no 'buttonsContainer' exists, create a new one
    buttonsContainer = document.createElement('div');
    buttonsContainer.className = 'buttonsContainer';
    document.querySelector('.container').appendChild(buttonsContainer);
  }

  // Create a new 'buttonsDiv' for this query
  var buttonsDiv = document.createElement('div');
  buttonsDiv.className = 'buttons';
  buttonsDiv.id = 'buttons' + queryId;
  buttonsDiv.dataset.queryId = queryId; // Store the queryId as a data attribute
  buttonsContainer.appendChild(buttonsDiv);

  // Create the previous and next buttons for this query
  let prevButton = document.createElement('button');
  prevButton.id = 'prevButton' + queryId;
  prevButton.textContent = 'Previous';
  buttonsDiv.appendChild(prevButton);

  let nextButton = document.createElement('button');
  nextButton.id = 'nextButton' + queryId;
  nextButton.textContent = 'Next';
  buttonsDiv.appendChild(nextButton);

  fetchPage(queryId, 1);
  addPaginationEventListeners(queryId, prevButton, nextButton, buttonsDiv);
  // generatePaginationButtons(queryId, queryState);
}


function addPaginationEventListeners(queryId, prevButton, nextButton, buttonsDiv) {
  prevButton.addEventListener('click', function() {
    var queryId = this.parentElement.dataset.queryId;
    if (resultsHistory[queryId].current_page > 1) {
      resultsHistory[queryId].current_page--;
      fetchPage(queryId, resultsHistory[queryId].current_page);
      renderState(resultsHistory[queryId]);
    }
  });

  nextButton.addEventListener('click', function() {
    var queryId = this.parentElement.dataset.queryId;
    if (resultsHistory[queryId].current_page < resultsHistory[queryId].total_pages) {
      resultsHistory[queryId].current_page++;
      fetchPage(queryId, resultsHistory[queryId].current_page);
      renderState(resultsHistory[queryId]);
    }
  });
}

function fetchPage(queryId, pageNumber) {
  let start = (pageNumber - 1) * itemsPerPage;
  let end = start + itemsPerPage;
  let data = resultsHistory[queryId].results.slice(start, end);

  // Update the current page number
  resultsHistory[queryId].current_page = pageNumber;

  populateTable(data);
}

function populateTable(data) {
  let tableBody = document.getElementById('myTable').getElementsByTagName('tbody')[0];
  tableBody.innerHTML = '';

  for (let item of data) {
    for (let [key, value] of item) {
      let row = document.createElement('tr');
      let cellKey = document.createElement('td');
      let cellValue = document.createElement('td');
      cellKey.textContent = key;
      cellValue.textContent = value;
      row.appendChild(cellKey);
      row.appendChild(cellValue);
      tableBody.appendChild(row);
    }
  }
}

<div class="common-buttons-container"></div>