How to add a record to a database using id instead of changing them (javascript and php)?

How do I add a few records to a database using the id’s I had listed in phpMyAdmin. The problem is once I entered the id , it display the database but when I entered another id , it took out and change the value of the first id database I entered and replace it with the second id. What I want is to add the database one by one through each click but instead of replacing it, I would like to add them below after the first ID I entered earlier. This is what I’m working on so far.

<html>
<head>
    <title>Search data by its ID</title>
</head>
<body>
    <center>
        <h1>Search a single DATA</h1>
        <h2>Retrieve data from database</h2>

    <div class = "container">
        <form action ="" method = "POST">
            <input type = "text" name ="id" placeholder="Student ID"/>
            <input type = "submit" name="search" value="Search By ID"/>

        </form>
        <table border ="2">
            <tr>
                    
                    <th>Product Name</th>
                    <th>Quantity</th>
                    <th>Returned Date</th>
                </tr><br><br>
             <?php
               $connection = mysqli_connect("localhost","root", "");
               $db = mysqli_select_db($connection,"myfirstdb");

               if(isset($_POST['search']))
               {
                   
                   $id = $_POST['id'];

                   $query = "SELECT * FROM `table3` where id = '$id'";
                   $query_run = mysqli_query($connection, $query);

                   while($row = mysqli_fetch_array($query_run))
                   {
                       ?>
                       <tr>
                           <td><?php echo $row ['product_name']; ?> </td>
                           <td><?php echo $row ['quantity']; ?> </td>
                           <td><?php echo $row ['returned_date']; ?> </td>

                       </tr>
                       
                       <?php

                   }
               }
               ?>

        </table>
    </div>
    </center>
</body>
</html>

ids are auto incremental by default. So doesn’t sound like ids are the way to go solve this problem.

mysql allows you to order your records, but what are you trying to order by?

@stetim94 I’m trying to order a list of database (book records) in a library. I want to add the books to the list one by one through a click button

Then you should add another <form> , this form then should have the input elements you wish (product name, quantity, returned data). This form should then be processed in the back-end by php which can insert the record in the database

don’t’ set ID’s, let the database generate the id.

@stetim94 I’m not really sure how to do that. Btw, does this need to involve the use of Javascript?

No, Javascript can make the process more dynamic. Making things more complicated, I would advice against it for now

Well, this is a good start:

https://www.php.net/manual/en/tutorial.forms.php

see how the action attribute of <form> points to a php file? In this file (as shown) you can then retrieve the data from the form

then you can insert the records:

https://www.tutorialspoint.com/mysqli/mysqli_insert_query.htm

@stetim94 do I add second form in the same file or different file?

That is up to you. Both are possible.

if you have two forms on a single page, I would set the action attribute for both forms.