How to select perticular class in jquery from a dynamic table - php

Question

I am trying to create a system to put sequence number of lessons, and i tried to make it unique as u can see that i take a variable $i but no luck . i am new in jquery. dont know how to use (this) in this situation. i am going to use ajax to save the data.
<?php
$chapter_id = $_GET['id'];
$lesson = mysqli_query($conn_course, "SELECT * FROM `lesson_list` WHERE `chapter_id` = '$chapter_id' order by `sequence` asc");
$i=0;
while ($info1 = mysqli_fetch_array($lesson)) {
$lesson_id = $info1['lesson_id'];
$lesson_info = mysqli_query($conn_course, "SELECT * FROM `lesson` WHERE `lesson_id` = '$lesson_id'");
$info = mysqli_fetch_array($lesson_info);
$i++;
?>
<tr>
<td>
<form>
<input type="hidden" class="lesson_id<?=$i?>" value="<?=$lesson_id?>">
<input type="hidden" class="sno" value="<?=$i?>">
<input type="hidden" id="chapter_id" value="<?=$chapter_id?>">
<input class="form-control sequence_no" style="width:27%;" type="number" value="<?= $info1['sequence'] ?>">
</form>
</td>
<td>
<a href="index.php?p=lesson-page&id=<?= $info['lesson_id'] ?>">
<button type="button" class="btn btn-outline-light btn-sm">
<?= $info['lesson_name'] ?>
</button>
</a>
</td>
<td>
<?= strtoupper($info['code']) ?>
</td>
<td>
<?php if($info['video_url'] == 0){}else{ ?>
<a href="https://player.vimeo.com/video/<?= $info['video_url'] ?>" target="blank"><button type="button"
class="btn btn-outline-light btn-sm">Play Video</button></a>
<?php } ?>
</td>
<td>
<form class="" action="../edit/delete.php" method="get" style="float:left; margin-right:5px;">
<input type="hidden" name="chapter_id" value="<?=$_GET['id']?>">
<input type="hidden" name="lesson_id" value="<?=$lesson_id?>">
<input type="submit" class="btn btn-outline-light btn-sm" name="delete_lesson" onclick="return confirm('Do you want to delete it')" value="Delete">
</form>
<a href="index.php?p=lesson-create&task=edit&id=<?= $info['lesson_id'] ?>&page=chapter-page&chapter_id=<?=$chapter_id?>">
<button type="button" class="btn btn-outline-light btn-sm">Edit
</button>
</a>
</td>
</tr>
<?php } ?>
myjquery is
$(document).ready(function () {
$('.sequence_no').on("change", function () {
var sequence_no = $('.sequence_no').val();
var s_no = $('.sno').val();
var chapter_id = $('#chapter_id').val();
var lesson_id = $('.lesson_id' + s_no).val();
alert(s_no);
})
})
alert is showing only the first table row s_no. how to select the lesson id of particular tr

Answer 1

You can simply get closest tr using $(this).closest("tr") and then use .find to get required classes values .
Demo Code :
$('.sequence_no').on("change", function() {
var selector = $(this).closest("tr")
var sequence_no = $(this).val();
var s_no = selector.find('.sno').val();
var chapter_id = selector.find('.chapter_id').val();
var lesson_id = selector.find('input[class*=lesson_id]').val();
console.log(s_no, lesson_id);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<tr>
<td>
<form>
<!--added class-->
<input type="hidden" class="lesson_id<?=$i?>" value="22">
<input type="hidden" class="sno" value="1">
<input type="hidden" class="chapter_id" value="1">
<input class="form-control sequence_no" style="width:27%;" type="number" value="2">
</form>
</td>
<td>
<a href="index.php?p=lesson-page&id=<?= $info['lesson_id'] ?>">
<button type="button" class="btn btn-outline-light btn-sm">
Smething
</button>
</a>
</td>
<td>
Abc
</td>
<td>
<form class="" action="../edit/delete.php" method="get" style="float:left; margin-right:5px;">
<input type="hidden" name="chapter_id" value="<?=$_GET['id']?>">
<input type="hidden" name="lesson_id" value="1">
<input type="submit" class="btn btn-outline-light btn-sm" name="delete_lesson" onclick="return confirm('Do you want to delete it')" value="Delete">
</form>
<a href="index.php?p=lesson-create&task=edit&id=<?= $info['lesson_id'] ?>&page=chapter-page&chapter_id=<?=$chapter_id?>">
<button type="button" class="btn btn-outline-light btn-sm">Edit
</button>
</a>
</td>
</tr>
<tr>
<td>
<form>
<input type="hidden" class="lesson_id<?=$i?>" value="26">
<input type="hidden" class="sno" value="2">
<input type="hidden" class="chapter_id" value="2">
<input class="form-control sequence_no" style="width:27%;" type="number" value="2">
</form>
</td>
<td>
<a href="index.php?p=lesson-page&id=<?= $info['lesson_id'] ?>">
<button type="button" class="btn btn-outline-light btn-sm">
Smething
</button>
</a>
</td>
<td>
Abc2
</td>
<td>
<form class="" action="../edit/delete.php" method="get" style="float:left; margin-right:5px;">
<input type="hidden" name="chapter_id" value="<?=$_GET['id']?>">
<input type="hidden" name="lesson_id" value="2">
<input type="submit" class="btn btn-outline-light btn-sm" name="delete_lesson" onclick="return confirm('Do you want to delete it')" value="Delete">
</form>
<a href="index.php?p=lesson-create&task=edit&id=<?= $info['lesson_id'] ?>&page=chapter-page&chapter_id=<?=$chapter_id?>">
<button type="button" class="btn btn-outline-light btn-sm">Edit
</button>
</a>
</td>
</tr>
</table>