Send data only related to that line-CodePudding

I have the following dynamically generated form:

var data = [
   {Id: "1", },
   {Id: "2", },
   {Id: "3", },
   {Id: "4", },
   {Id: "5", },
   {Id: "6", },
];

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

  var linha = ``;
  for (var x = 0; x < data.length; x  ) {

   linha  = `<form method="POST" action="" enctype="multipart/form-data" >
             <div >
              <input type="text"  name="id_tareff[]" value="${data[x].Id}">
             </div>
             <div >
              <label for="obsposic" >Observações </label>
              <textarea rows="3"  name="obsposic[]"></textarea>
             </div>
             <div >
              <button type="button"   onclick="reg_tarefa();"> TRATADO <i ></i></button>
             </div>
             </form>
             <hr />`;
   
   $(".pagmfalta").html(linha);
   $('#minhaDiv1').show();
   
   }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<button type="button"  style="float: right; margin-right: 5%; margin-top: 4%;"><i ></i> Consultar </button>

<section id="s1">
  <div style="display:none" id="minhaDiv1">
        <div >

        </div>
  </div>
</section>

So far so good. My problem is now sending the values to php to insert in the database. I'm doing it like this:

function reg_tarefa()
{  
var id_tareff = [];
$("input[name='id_tareff[]']").each(function() {id_tareff.push(this.value)});

var obsposic = [];
$("textarea[name^='obsposic[]']").each(function() {obsposic.push($(this).val())});

var dadosajax = {
'id_tareff[]' : id_tareff,
'obsposic[]' : obsposic
}

$.ajax({
    url: 'regtarefa.php',
    type: 'POST',
    cache: false,
    data: dadosajax,
    success: function(result2){ 

    }
  });
}

For example, I want to click on the second button, where Id=2 and only send data regarding that id. And as I am doing it sends the data of all the ids. Can you help?

CodePudding user response：

Change the button to pass itself as the argument to reg_tarefa: onclick="reg_tarefa(this);".

Then change the function to use DOM navigation relative to the button to find the inputs in the same form.

function reg_tarefa(element) {
  let form = $(element).closest("form");
  
  var id_tareff = [];
  form.find("input[name='id_tareff[]']").each(function() {
    id_tareff.push(this.value)
  });

  var obsposic = [];
  form.find$("textarea[name^='obsposic[]']").each(function() {
    obsposic.push($(this).val())
  });

  var dadosajax = {
    'id_tareff[]': id_tareff,
    'obsposic[]': obsposic
  }

  $.ajax({
    url: 'regtarefa.php',
    type: 'POST',
    cache: false,
    data: dadosajax,
    success: function(result2) {
    }
  });
}