What's wrong with my selector that supposed to select the child of "this"?

JavaScript
1

Ok so i am trying to make a shopping cart and now i must make jQuery to select the value of input number box so i made this script code:

    $('#previewCon tbody tr .addtocart').click(function(){
        var itemid=$(this).attr('data-id');
        var itemqty=$(this).find('#number').val();
        alert(itemqty);
    })

The code suppose to select the pressed button and find the #number’s number to add it to cart, unfortunately there is something wrong with the selector.
can you help me out with that?

i edited the code and now it works only for the 1st item of the list, if i click to another item of the list it will not work, it will simply take the 1st input box

here is the edited code:

    $('#previewCon tbody tr .addtocart').click(function(){
        var itemid=$(this).attr('data-id');
        var itemqty=$('#previewCon tbody tr #number').val();
        console.log(itemqty);
    })

so, what to do to take the value from the same tr where i pressed the add to cart button?

3

my project is 13 files so i am pasting only the carlist.php
here you can see all the code for carlist.php i can give the entire project in a rar file but no one is checking rar files

my carlist.php code:

<?php

    require_once("database.php");
    $select = $pdo->prepare("SELECT * FROM `carshopdatabase` ");
    $select->execute([]);
    $query = $select->fetchAll();
        echo "<table id='previewCon'><thead><th>ID</th><th>car name</th><th>HP</th><th>CC</th><th>Drive Type</th><th>Required License</th><th>Cost</th><th>qty</th></thead><tbody>"; 
foreach($query as $k => $i){
    $comment[$k]=$i["comment"];
   echo "<tr data-id=".$i["id"]."><td id='id'>cr".$i["id"]."</td> <td>".$i["car_name"]."</td> <td>".$i["HP"]."</td> <td>".$i["CC"]."</td> <td>".$i["drive_type"]."</td> <td>".$i["required_license"]."</td> <td>".$i["cost"]."</td><td><input type='number' id='number' min='1' step='1'></td><td data-id=".$i["id"]."><input data-id=".$i['id']." class='addtocart' type='button' value='Add to cart'/></td></tr>";
}
echo "</tbody></table>";
echo "<script>$('#previewCon tbody tr').click(function(){
    var id=$(this).attr('data-id');
        $.ajax({
            url: 'Postcomment.php', 
            type: 'POST', 
            data: {id:id}, 
            success: function(response){
                $('#carcomment').html(response);
            }
        })
    })
    $('#previewCon tbody tr .addtocart').click(function(){
        var itemid=$(this).attr('data-id');
        var itemqty=$('#previewCon tbody tr #number').val();
        console.log(itemqty);
    })
    </script>"

?>
4

Ok, i finally found it!

here is the correct code:

<?php

    require_once("database.php");
    $select = $pdo->prepare("SELECT * FROM `carshopdatabase` ");
    $select->execute([]);
    $query = $select->fetchAll();
        echo "<table id='previewCon'><thead><th>ID</th><th>car name</th><th>HP</th><th>CC</th><th>Drive Type</th><th>Required License</th><th>Cost</th><th>qty</th></thead><tbody>"; 
foreach($query as $k => $i){
    $comment[$k]=$i["comment"];
   echo "<tr data-id=".$i["id"]."><td id='id'>cr".$i["id"]."</td> <td>".$i["car_name"]."</td> <td>".$i["HP"]."</td> <td>".$i["CC"]."</td> <td>".$i["drive_type"]."</td> <td>".$i["required_license"]."</td> <td>".$i["cost"]."</td><td><input type='number' id='number".$i['id']."' min='1' step='1'></td><td data-id=".$i["id"]."><input data-id=".$i['id']." class='addtocart' type='button' value='Add to cart'/></td></tr>";
}
echo "</tbody></table>";
echo "<script>$('#previewCon tbody tr').click(function(){
    var id=$(this).attr('data-id');
        $.ajax({
            url: 'Postcomment.php', 
            type: 'POST', 
            data: {id:id}, 
            success: function(response){
                $('#carcomment').html(response);
            }
        })
    })
    $('#previewCon tbody tr .addtocart').click(function(){
        var itemid=$(this).attr('data-id');
        var itemqty=$('#number'+itemid).val();
        console.log(itemqty);
    })
    </script>"

?>

by this way it searches for the id number and it puts the itemid at the end so i have ex: number3 as id to search, it searches for the number3 it and it takes its value

these 4 lines of code took me the entire day but i found it!

edit: i also edited the id of the input type from my table and now its id=number.$i[‘id’]
so i have ex number3 for the machine to find with the adobe id which is also number3 so it finds it and it gets its value