send ID (dynamically created in php) from a href tag to ajax/jquery?

Question

I have a question, I'm very new to jQuery and Ajax, so I hope someone can help me.

I have multiple 'edit' buttons in table ((1.st column data)for each row data -> (2.nd column action) button edit), and I've created some inline-editing function in jQuery: but when I click on edit button to show data in table and edit, they are all opening at once, I want to open only for instance first to edit. I assigned every edit button id in element dynamically.

I'm assuming I have to send that id button to a Ajax, so it can proceed, but I don't know how and what to do? I hope someone could explain me. Thank you very much!!!

Here is my code:

php

<?php 
                  $teams = Team::getAll();
                  foreach ($teams as $team) {
                    $tname = $team->name;
                    $tid = $team->team_id;
                    echo "<tr><td><a href='#' class='editable' style='margin-left: 2px;'>".$tname."</a><form method='POST' action=''><input type='text' class='editshow form-control col-sm-3 ' aria-label='Sizing example input' aria-describedby='inputGroup-sizing-sm' name='edit_name' value='".$tname."'><button name='btnSave' style='margin-left: 2px; margin-top:3px;' class='btn btn-success btn-sm editshow'>Save</button></form></td>";

                    echo "<td><a href='teams.php?edit_tid=$tid'><button class='btn btn-primary btn-sm btnEdit'".$tid."'>Edit</button></a><a href='teams.php?delete_tid=$tid'><form method='POST' action=''><button name='btnDelete' class='btn btn-danger btn-sm'>Delete</button></form></a></td></tr>";
                  }
                  ?>

jQ

 <script type="text/javascript">
$(".editshow").hide();
$(".btnEdit").click(function(){
  $(".editshow").toggle();
  $(".editable").setTimeout(2000);
});
</script>

Answer 1

You're very close -- basically, you want to be able to reference the specific button that was clicked, then get to its related edit fields.

<script type="text/javascript">
$(".editshow").hide();
$(".btnEdit").click(function(){
  // We'll save a reference to the current button...
  let clickedBtn = $(this),
      containerEl = clickedBtn.closest("tr");
  // now, we can work specifically within this TR el, as that is
  //  the container for our currently editing data.
  containerEl.find(".editshow").toggle();
  containerEl.find(".editable").setTimeout(2000);
});
</script>

Using jQuery's closest() gets me to the nearest <tr> , which is the container for the current table row. By limiting the selections to THAT (using containerEl.find() ), I am only toggling elements related to this particular row.

I do recommend taking a look at the jQuery docs, there are some complex things happening here. First, the $(this) within the click handler refers to the clicked element. Second, you might want to look at the docs for both .closest() and .find() .

Not sure what the setTimeout() is meant to be doing, but that should get you started.

Hope it helps!