unable to find the right value of input text

I have this jquery script and i am trying to catch the value of input text box with the class “indice”. I was able to catch the rel attribute of the button that trigger the event and from there i would like to catch the value of the input text but I cannot get it.. With the code below, it always catch the first element of the page and not the one corresponding to the correct button that trigger the event.

$(document).ready(function(){
    $('.cl-button').on('click', function(e){
        e.preventDefault();
        var id =  $(this).attr('rel');
        alert(id);
        var indice = $(this).parent().parent().parent('form').find('.indice').val();
        alert(indice);
        var data_1 = 'id=' + id + '&indice=' + indice;
        $.ajax({
            type: "POST",
            data: data_1,
            url: "php/save_index.php"
        })
        .done(function() {
            $('#myModal').modal('show');
        });      
    });
});

this is the html:

<div class="row g">
    <div class="col-md-12" style="border: 1px solid">
        <form class="row d-flex justify-content-center align-items-center" style="border: 0px solid;">
    
            $this->html .= "<div class='col-md-2 h'>";
            $this->html .= "<div class='card'>";
            $this->html .= "<img class='card-img-top' rel= '" . $this->row['id'] . "' src='../" . $this->row['foto'] . "' alt= '' >";
            $this->html .= "</div> <!-- end card -->";
            $this->html .= "</div> <!-- end col-md-2 -->";
    
            $this->html .= "<div class='col-md-2 h'>";
            $this->html .= "<input type='text' class='form-control indice' placeholder='indice' value='" . $this->row['indice'] . "'>";
            $this->html .= "</div> <!-- end col-md-2 -->";
    
            $this->html .= "<div class='col-md-2 h' style='border: 0px solid;'>";
            $this->html .= "<div class='d-grid gap-2 d-md-flex justify-content-md-end'>";
            $this->html .= "<a href='' class='btn btn-primary cl-button' rel='" .$this->row['id'] ."'>Salva</a>";
            $this->html .= "</div>";
            $this->html .= "</div><!-- end col-md-2 -->";
  
        </form>
    </div>
</div>

I am using “jquery-3.5.1.min.js”

Browser rendered page:

  <div class="row g">
      <div class="col-md-12" style="border: 1px solid">
          <form class="row d-flex justify-content-center align-items-center" style="border: 0px solid;">

            <div class='col-md-2 h'><div class='card'><img class='card-img-top' rel= '253' src='../gallery/scansione_pagina__raddrizzata-8.jpg' alt= '' ></div> <!-- end card --></div> <!-- end col-md-2 --><div class='col-md-2 h'><input type='text' class='form-control indice' placeholder='indice' value='1'></div> <!-- end col-md-2 --><div class='col-md-2 h' style='border: 0px solid;'><div class='d-grid gap-2 d-md-flex justify-content-md-end'><a href='' class='btn btn-primary cl-button' rel='253'>Salva</a></div></div><!-- end col-md-2 --><div class='col-md-2 h'><div class='card'><img class='card-img-top' rel= '254' src='../gallery/mac-1.jpg' alt= '' ></div> <!-- end card --></div> <!-- end col-md-2 --><div class='col-md-2 h'><input type='text' class='form-control indice' placeholder='indice' value='2'></div> <!-- end col-md-2 --><div class='col-md-2 h' style='border: 0px solid;'><div class='d-grid gap-2 d-md-flex justify-content-md-end'><a href='' class='btn btn-primary cl-button' rel='254'>Salva</a></div></div><!-- end col-md-2 --><div class='col-md-2 h'><div class='card'><img class='card-img-top' rel= '255' src='../gallery/mac-2.jpg' alt= '' ></div> <!-- end card --></div> <!-- end col-md-2 --><div class='col-md-2 h'><input type='text' class='form-control indice' placeholder='indice' value='3'></div> <!-- end col-md-2 --><div class='col-md-2 h' style='border: 0px solid;'><div class='d-grid gap-2 d-md-flex justify-content-md-end'><a href='' class='btn btn-primary cl-button' rel='255'>Salva</a></div></div><!-- end col-md-2 --><div class='col-md-2 h'><div class='card'><img class='card-img-top' rel= '256' src='../gallery/mac-3.jpg' alt= '' ></div> <!-- end card --></div> <!-- end col-md-2 --><div class='col-md-2 h'><input type='text' class='form-control indice' placeholder='indice' value='4'></div> <!-- end col-md-2 --><div class='col-md-2 h' style='border: 0px solid;'><div class='d-grid gap-2 d-md-flex justify-content-md-end'><a href='' class='btn btn-primary cl-button' rel='256'>Salva</a></div></div><!-- end col-md-2 --><div class='col-md-2 h'><div class='card'><img class='card-img-top' rel= '257' src='../gallery/mac-4.jpg' alt= '' ></div> <!-- end card --></div> <!-- end col-md-2 --><div class='col-md-2 h'><input type='text' class='form-control indice' placeholder='indice' value='5'></div> <!-- end col-md-2 --><div class='col-md-2 h' style='border: 0px solid;'><div class='d-grid gap-2 d-md-flex justify-content-md-end'><a href='' class='btn btn-primary cl-button' rel='257'>Salva</a></div></div><!-- end col-md-2 --> 

          </form>
      </div>
  </div>

Answer

This is working.

$(document).ready(function(){
    $('.cl-button').on('click', function(e){
        e.preventDefault();
        var id =  $(this).attr('rel');
        alert('rel: ' + id);
        var indice = $(this).parent().parent().prev().find('.indice').val();
        alert('indice: ' + indice);
        var data_1 = 'id=' + id + '&indice=' + indice;
        $.ajax({
            type: "POST",
            data: data_1,
            url: "php/save_index.php"
        })
        .done(function() {
            $('#myModal').modal('show');
        });      
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row g">
  <div class="col-md-12" style="border: 1px solid">
    <form class="row d-flex justify-content-center align-items-center" style="border: 0px solid;">

      <div class='col-md-2 h'>
        <div class='card'><img class='card-img-top' rel='253' src='../gallery/scansione_pagina__raddrizzata-8.jpg' alt=''></div> <!-- end card -->
      </div> <!-- end col-md-2 -->
      <div class='col-md-2 h'><input type='text' class='form-control indice' placeholder='indice' value='1'></div> <!-- end col-md-2 -->
      <div class='col-md-2 h' style='border: 0px solid;'>
        <div class='d-grid gap-2 d-md-flex justify-content-md-end'><a href='' class='btn btn-primary cl-button' rel='253'>Salva</a></div>
      </div><!-- end col-md-2 -->
      <div class='col-md-2 h'>
        <div class='card'><img class='card-img-top' rel='254' src='../gallery/mac-1.jpg' alt=''></div> <!-- end card -->
      </div> <!-- end col-md-2 -->
      <div class='col-md-2 h'><input type='text' class='form-control indice' placeholder='indice' value='2'></div> <!-- end col-md-2 -->
      <div class='col-md-2 h' style='border: 0px solid;'>
        <div class='d-grid gap-2 d-md-flex justify-content-md-end'><a href='' class='btn btn-primary cl-button' rel='254'>Salva</a></div>
      </div><!-- end col-md-2 -->
      <div class='col-md-2 h'>
        <div class='card'><img class='card-img-top' rel='255' src='../gallery/mac-2.jpg' alt=''></div> <!-- end card -->
      </div> <!-- end col-md-2 -->
      <div class='col-md-2 h'><input type='text' class='form-control indice' placeholder='indice' value='3'></div> <!-- end col-md-2 -->
      <div class='col-md-2 h' style='border: 0px solid;'>
        <div class='d-grid gap-2 d-md-flex justify-content-md-end'><a href='' class='btn btn-primary cl-button' rel='255'>Salva</a></div>
      </div><!-- end col-md-2 -->
      <div class='col-md-2 h'>
        <div class='card'><img class='card-img-top' rel='256' src='../gallery/mac-3.jpg' alt=''></div> <!-- end card -->
      </div> <!-- end col-md-2 -->
      <div class='col-md-2 h'><input type='text' class='form-control indice' placeholder='indice' value='4'></div> <!-- end col-md-2 -->
      <div class='col-md-2 h' style='border: 0px solid;'>
        <div class='d-grid gap-2 d-md-flex justify-content-md-end'><a href='' class='btn btn-primary cl-button' rel='256'>Salva</a></div>
      </div><!-- end col-md-2 -->
      <div class='col-md-2 h'>
        <div class='card'><img class='card-img-top' rel='257' src='../gallery/mac-4.jpg' alt=''></div> <!-- end card -->
      </div> <!-- end col-md-2 -->
      <div class='col-md-2 h'><input type='text' class='form-control indice' placeholder='indice' value='5'></div> <!-- end col-md-2 -->
      <div class='col-md-2 h' style='border: 0px solid;'>
        <div class='d-grid gap-2 d-md-flex justify-content-md-end'><a href='' class='btn btn-primary cl-button' rel='257'>Salva</a></div>
      </div><!-- end col-md-2 -->

    </form>
  </div>
</div>

Just had to change $(this).parent().parent().parent('form').find('.indice').val(); to $(this).parent().parent().prev().find('.indice').val();

You were going back to the form and finding the .indice from there so you were ending up with the first .induice instance, you had to be as relevant as possible from the clicked a link so I used prev() function to find the previous div and find the .indice of that div which gave the right instance of .indice.