// Referencing <form>
const UI = document.forms.UI;
// Array comprising proverbs and translations
const proverbs = [
  {main: `A (g)attë mbrèšarolë facë i (g)attarièddë cëcatë.`,
   ipa: `a atːə mˌbɾɪʃəˈɾolə fat͡ʃ i ˈatːaɾiˌɛdːə t͡ʃə katʰ`,
   it: `La gatta frettolosa fa i gattini ciechi.`,
   en: `The hasty cat makes blind kittens.`},
   {main: `010101010101010101010101010101010101010101`, ipa: `02`, it: `03`, en: `04`},
   {main: `1111111111111111111111111111111111111111111111111`, ipa: `12`, it: `13`, en: `14`},
   {main: `2121212121212121212121212121212121212121212121`, ipa: `22`, it: `23`, en: `24`},
   {main: `3131313131313131313131313131313131313131313131`, ipa: `32`, it: `33`, en: `34`},
   {main: `4141414141414141414141414141414141414141414141`, ipa: `42`, it: `43`, en: `44`},
   {main: `5151515151515151515151515151515151515151515151`, ipa: `52`, it: `53`, en: `54`}
];
// Counter definition
let count = 0; 
// Binding <form> to click event
UI.onclick = clickHandler;
// Click event handler automatically passes Event Object
function clickHandler(e) {
  // Referencing <dialog>
  const modal = document.querySelector('.proverbs');
  // Identifying what the user clicked
  const clk = e.target;
  // Referring all <button>s and <fieldset>
  const IO = this.elements;
  // Opening <dialog> if #open is clicked
  if (clk.matches('#open')) {
    clk.style.display = 'none';
    modal.showModal();
  }
  // Closing <dialog> if #close is clicked
  if (clk.matches('#close')) {
    IO.open.style.display = 'inline-flex';
    modal.close();
  }
  /*
  Upon clicking #next...
  ...increase counter...
  ...if counter exceeds length of proverbs array...
  ...reset counter to 0 (starting again)...
  ...call move() with updated count and IO references
  */
  if (clk.matches('#next')) {
    ++count;
    if (count > (proverbs.length-1)) count = 0;
    move(count, IO);
  }
  // Following similar logic for #back button
  if (clk.matches('#back')) {
    --count;
    if (count < 0) count = proverbs.length -1;
    move(count, IO);
  }
}
// Passing counter and form control reference (IO) 
function move(i, fc) {
  // Referencing <ul>
  const list = document.querySelector('.list');
  // New content string for <legend>
  const main = `<legend>${proverbs[i].main}</legend>`;
  // String for content of <ul>
  const items = `
        <li><b>IPA: </b>${proverbs[i].ipa}</li>
        <li><b>Italian: </b>${proverbs[i].it}</li>
        <li><b>English: </b>${proverbs[i].en}</li>`;
  // Clearing existing <legend> and <li>
  fc.content.firstElementChild.remove();
  list.replaceChildren();
  // Inserting new htmlStrings
  fc.content.insertAdjacentHTML('afterbegin', main);
  list.insertAdjacentHTML('beforeend', items);
}

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&family=Raleway:wght@500&display=swap');

html {
  font: 500 2ch/1.2 'Oswald'
}

dialog {
  position: relative;
  padding-top: 25px;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, 
              rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

#content {
  border-radius: 4px;
}

legend {
  font-family: 'Raleway';
  font-weight: 900;
  margin-bottom: -8px;
}

#close {
  position: absolute;
  right: 4px;
  top: 4px;
  height: 1rem;
  font-size: 1.2rem;
}

ul {
  margin-left: 0px;
}

li {
  margin-bottom: 8px;
}

button {
  display: inline-flex;
  align-items: center;
  border: 2px outset rgb(227, 227, 227);
  border-radius: 4px;
  font: inherit;
  font-variant: small-caps;
  cursor: pointer;
}

.btn {
  float: right;
}

#back {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

#next {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

<form id='UI'>
  <button id='open' type='button'>Open</button>
  <dialog class="proverbs">
    <button id="close" type='button'>&times;</button>
    <fieldset id='content'>
      <legend>A (g)attë mbrèšarolë facë i (g)attarièddë cëcatë.</legend>
      <ul class='list'>
        <li><b>IPA: </b>a atːə mˌbɾɪʃəˈɾolə fat͡ʃ i ˈatːaɾiˌɛdːə t͡ʃə katʰ</li>
        <li><b>Italian: </b>La gatta frettolosa fa i gattini ciechi.</li>
        <li><b>English: </b>The hasty cat makes blind kittens.</li>
      </ul>
      <button id='next' class='btn' type='button'>Next</button>
      <button id='back' class='btn' type='button'>Back</button>
    </fieldset>
  </dialog>
</form>

const modals = document.querySelectorAll('.modalBox');

modals.forEach((modal, index) => {
  const id = `modalBox${index}`;
  modal.id = id
  const link = modal.querySelector('a');
  link.setAttribute('href', `#${id}`)
})

.modalBox {
  display: block;
  position: relative;
  text-align: left;
  overflow: hidden;
  background: #ffffff;
  transition: all 0.4s;
  padding: 5px;
  margin-bottom: 2rem;
  height: 2.5rem;
  width: 100%;
  max-width: 800px;
}

.modalBox:target {
  height: 13.5rem;
}

<div class="proverbs">
  <div class="modalBox">
    <a href="#"> A (g)attë mbrèšarolë facë i (g)attarièddë cëcatë.</a>
    <p id="data"><b>IPA:</b> a atːə mˌbɾɪʃəˈɾolə fat͡ʃ i ˈatːaɾiˌɛdːə t͡ʃə katʰ</p>
    <p id="data"><b>Italian:</b> La gatta frettolosa fa i gattini ciechi.</p>
    <p id="data"><b>English:</b> The hasty cat makes blind kittens.</p>
    <a href="#" class="modalclose">&times;</a>
  </div>

  <div class="modalBox">
    <a href="#"> A (g)attë mbrèšarolë facë i (g)attarièddë cëcatë.</a>
    <p id="data"><b>IPA:</b> a atːə mˌbɾɪʃəˈɾolə fat͡ʃ i ˈatːaɾiˌɛdːə t͡ʃə katʰ</p>
    <p id="data"><b>Italian:</b> La gatta frettolosa fa i gattini ciechi.</p>
    <p id="data"><b>English:</b> The hasty cat makes blind kittens.</p>
    <a href="#" class="modalclose">&times;</a>
  </div>
</div>