Get the correct id according to the div I click

I have the following dynamic code:

var data = [
   {codigo: "1", Utente: "Teste", },
   {codigo: "2", Utente: "Teste1", },
   {codigo: "3", Utente: "Teste2",},
   {codigo: "4", Utente: "Teste3", },
   {codigo: "5", Utente: "Teste4", },
   {codigo: "6", Utente: "Teste5", },
];

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

var linha = ``;

for (var i = 0; i < data.length; i++) {
codigo = data[i].codigo;
Utente = data[i].Utente;

linha += `<div class="col-md-6 col-xl-3">
            <a href="#" class="dropdown-item btn btn-warning histor-uten">
              <div class="profile-photo-div" id="profile-photo-div">
                <div class="profile-buttons-div">
                  <div class="profile-img-input" id="profile-img-input">
                    <label class="butttton" id="change-photo-label" for="change-photo">#${Utente}</label>
                    <input type="hidden" name="id_utt" value="${codigo}">
                  </div>
                </div>
               </div>
              </a>
            </div>`;
   }
                  
   $(".tesssste").html(linha);
 
});

$(document).on('click', '.histor-uten', function(){

  var id_utt = $("input[name='id_utt']").val();
  console.log(id_utt);

});

$(function() {
    $(".btn-show").click(function(e) {
      e.preventDefault();
      el = $(this).data('element');
      $(el).show();
      $("section > div").not(el).hide();
    });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>

<a href="s105" data-element="#minhaDiv105" class="btn-show dad-inf">Utentes</a>

<section id="s105">
  <div id="minhaDiv105">
    <div class="row tesssste">
    </div>
  </div>
</section>

This code generates a div with several users and their respective user code. so far so good.

The problem I’m having comes after this step. After returning the users, when I click for example on the user with the user code number 3, it returns the user code 1.

And the correct one, if I click on the user with the code number 3, it should return the user code number 3 and not the 1.

Can you help?

Answer

Here is an example using Event Delegation. You basically check which button it being clicked and get the child input element of its parent instead of the first one available in the document.

var data = [
   {codigo: "1", Utente: "Teste", },
   {codigo: "2", Utente: "Teste1", },
   {codigo: "3", Utente: "Teste2",},
   {codigo: "4", Utente: "Teste3", },
   {codigo: "5", Utente: "Teste4", },
   {codigo: "6", Utente: "Teste5", },
];

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

var linha = ``;

for (var i = 0; i < data.length; i++) {
codigo = data[i].codigo;
Utente = data[i].Utente;

linha += `<div class="col-md-6 col-xl-3">
            <a href="#" class="dropdown-item btn btn-warning histor-uten">
              <div class="profile-photo-div" id="profile-photo-div">
                <div class="profile-buttons-div">
                  <div class="profile-img-input" id="profile-img-input">
                    <label class="butttton" id="change-photo-label" for="change-photo">#${Utente}</label>
                    <input type="hidden" name="id_utt" value="${codigo}">
                  </div>
                </div>
               </div>
              </a>
            </div>`;
   }
                  
   $(".tesssste").html(linha);
 
});

$(document).on('click', '.histor-uten', function(e){
    let parent = $(this);
    // First make sure it selects the element with the histor-uten class
  if(!parent.hasClass('histor-uten')){
    parent = $(this).closest('.histor-uten');
  }

    // Get the child input from the parent instead of the first one in the document
  var id_utt = $(parent.find("input[name='id_utt']")).val();
  console.log(id_utt);

});

$(function() {
    $(".btn-show").click(function(e) {
      e.preventDefault();
      el = $(this).data('element');
      $(el).show();
      $("section > div").not(el).hide();
    });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>

<a href="s105" data-element="#minhaDiv105" class="btn-show dad-inf">Utentes</a>

<section id="s105">
  <div id="minhaDiv105">
    <div class="row tesssste">
    </div>
  </div>
</section>