Slotmachine Jquery Dynamic

Question

I have the following Slotmachine:

Use the API

  <div>
    <div id="casino1" class="slotMachine" style="margin-left: -65px;">
      <div class="slot slot1"></div>
      <div class="slot slot2"></div>
      <div class="slot slot3"></div>
      <div class="slot slot4"></div>
      <div class="slot slot5"></div>
      <div class="slot slot6"></div>
    </div>

    <div id="casino2" class="slotMachine">
      <div class="slot slot1"></div>
      <div class="slot slot2"></div>
      <div class="slot slot3"></div>
      <div class="slot slot4"></div>
      <div class="slot slot5"></div>
      <div class="slot slot6"></div>
    </div>

    <div id="casino3" class="slotMachine">
      <div class="slot slot1"></div>
      <div class="slot slot2"></div>
      <div class="slot slot3"></div>
      <div class="slot slot4"></div>
      <div class="slot slot5"></div>
      <div class="slot slot6"></div>
    </div>
    <div class="btn-group btn-group-justified" role="group">
      <button id="casinoShuffle" type="button" class="btn btn-primary btn-lg">Shuffle!</button>
    </div>
  </div>
</div>

<script id="codeScript5">
    let count = 0;
    const btnShuffle = document.querySelector('#casinoShuffle');
    const casino1 = document.querySelector('#casino1');
    const casino2 = document.querySelector('#casino2');
    const casino3 = document.querySelector('#casino3');
    const mCasino1 = new SlotMachine(casino1, {
      active: 0,
      delay: 1000,
      direction: 'up'
    });
    const mCasino2 = new SlotMachine(casino2, {
      active: 1,
      delay: 2000,
      direction: 'down'
    });

    const mCasino3 = new SlotMachine(casino3, {
      active: 2,
      delay: 3000,
      direction: 'up'
    });
    btnShuffle.addEventListener('click', () => {
      count = 3;
      mCasino1.shuffle(5);
      mCasino2.shuffle(6);
      mCasino3.shuffle(7);
    });
  </script>

Source: jQuery-Slotmachine

What do I need: * I will bring the first slot filled with the names of the cities:

Example:

    <div id="casino1" class="slotMachine" style="margin-left: -65px;">
      <div class="Cidade 1">Cidade 1</div>
      <div class="Cidade 2">Cidade 2</div>
      <div class="Cidade 3">Cidade 3</div>
      <div class="Cidade 4">Cidade 4</div>
      <div class="Cidade 5">Cidade 5</div>
      <div class="Cidade 6">Cidade 6</div>
    </div>

Let’s say he stops in City 1:

Before stopping the second need to make a query in the database to bring the neighborhoods of the city that was selected in the first slot, example:

<div id="casino2" class="slotMachine">
  <div class="Bairros da Cidade 1"></div>
  <div class="Bairros da Cidade 1"></div>
  <div class="Bairros da Cidade 1"></div>
  <div class="Bairros da Cidade 1"></div>
  <div class="Bairros da Cidade 1"></div>
  <div class="Bairros da Cidade 1"></div>
</div>

That is to say:

Slot 1 is already filled.

Slot 2 is filled after the stop of slot 1.

Slot 3 is filled after the stop of Slot 2.

Examples of consultations:

Slot 1:

select * from cidades

Slot 2:

 select * from cidades where bairro = "Cidade 1";

Slot 3:

select * from cidades where bairro = "Cidade 1" And rua='bairro cidade 1'

The Database is Mysql.

The queries are just to illustrate, but my problem is not to make them, but how to include them in Slotmachine.

I’ve been told that with Ajax I could do the consultation, but I didn’t quite understand how to do it, someone could give me a tip on how to set up this routine ?