Button only returns data on second click

I have the following code to return the desired data:

<button type="button" tabindex="0" class="dropdown-item btn-show dad-pagamento" >Teste</button>

$(document).on('click', '.dad-pagamento', function() {

  $.getJSON('valreceber.php', function(data) {
    $.getJSON('valreceberext.php', function(data1) {
      $.getJSON('valreceberext1.php', function(data2) {
        $.getJSON('valreceberext2.php', function(data3) {
          $.getJSON('valreceberext3.php', function(data4) {
            $.getJSON('valreceberext4.php', function(data5) {

              var results = data.concat(data1).concat(data2).concat(data3).concat(data4).concat(data5);

              var arr = [];
              Object.keys(results).forEach(c => {

                id_utt1 = results[c].N_utente;

                arr.push(id_utt1);

              })

              $.getJSON('valreceber1.php?arr' + '&arr=' + arr, function(data6) {

                document.querySelector(".dad-pagamento").addEventListener("click", clickHandler);


                function clickHandler() {
                  data6.sort(function(a, b) {
                    return a.N_utente - b.N_utente;
                  });

                  data6.forEach(function(person) {
                    var id = person.N_utente;
                    var filteredData = results.filter(d => d.N_utente === id);
                    addHtml(person.NomeResp, person.moradaResp, person.CodigoPostal, person.Localidade, filteredData);
                  });

                }

                function addHtml(NomeResp, moradaResp, CodigoPostal, Localidade, filteredData) {

                  var html = ``;

                  html += ``;

                  document.querySelector(".pagmfalta").innerHTML += html;
                  $('#minhaDiv1').show();

                }
              });
            });
          });
        });
      });
    });
  });
});

At the level of expected result, it is working correctly.

What I have is a problem with the button that calls the function to return the data. For the data to be shown, I have to click the button twice and I wanted to click the button once to show the data coming from the database.

The reason for showing the data only on the second click is because of these lines:

$(document).on('click', '.dad-pagamento', function(){ 

and

document.querySelector(".dad-pagamento").addEventListener("click", clickHandler);

How can I solve the problem for when clicking once on the button show the data soon?

Looks like you just have to invoke the handler manually, so that it piggy-backs on the first click:

$(document).on('click', '.dad-pagamento', function() {
// ...
function clickHandler() {
....
}
clickHandler(); // apply it once right away
document.querySelector(".dad-pagamento").addEventListener("click", clickHandler); // set it as handler for later clicks
// ...
});

(Note that I moved the line where the clickHandler is placed after its declaration - it works the other way too, but it is confusing)