javascript - Display different variables on a modal using PHP

Question

I'm learning PHP and making a bidding website as a learning project. I've managed to get the properties from the database and display them on the screen then tried to add a modal to allow the user to bid but it is only showing me the last value from the variable. How do I change the variable to make it dynamically change when I click on the bid option?

   <?php 
    echo " <script>
    
        function createCountDown(elementId, date) {
            // Set the date we're counting down to
            var countDownDate = new Date(date).getTime();
    
            // Update the count down every 1 second
            var x = setInterval(function() {
    
            // Get todays date and time
            var now = new Date().getTime();
    
            // Find the distance between now an the count down date
            var distance = countDownDate - now;
    
            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
            // Display the result in the element with id='demoslayer'
            document.getElementById(elementId).innerHTML = days + 'd '  + hours + 'h ' 
            + minutes + 'm '  + seconds + 's ';
    
            // If the count down is finished, write some text 
            if (distance < 0) {
                clearInterval(x);
                document.getElementById(elementId).innerHTML = 'AUCTION EXPIRED';
            }
            }, 1000);
        }
        </script>";
    
        echo "
        <div class=container>
    
    
            <div class=row>
                <div class= main col-xs-9>
                    <div class=well>body";
    
                    $sql = "SELECT * FROM bid WHERE enddate >= CURDATE()";
                        if($result = mysqli_query($db, $sql)){
                            if(mysqli_num_rows($result) > 0){
                                
                                    while($row = mysqli_fetch_array($result)){
                                    
                                            $row['idbid'] ;
                                            $row['propertyid'];
                                            $row['regular_price'] ;
                                            $row['starting_price'] ;
                                            $row['enddate'];
                                        
    
    
                                            $idbid = $row['idbid'];
                                            $pid = $row['propertyid'];
                                            $rp = $row['regular_price'];
                                            $sp = $row['starting_price'];
                                            $edate = $row['enddate'];
                                            $cookie = $row['enddate'];
                                            $seconds = strtotime($row['enddate']) - time();
                                            $date=date_create($cookie);
                                            $slayer = $row['idbid'];
                                            $cookie2 = date_format($date,"M d, Y H:i:s");
                                        
                                            
                                            
    
                            echo "
    
                            
                                            <div class=card>
                                <img
                                src=https://mdbootstrap.com/img/new/standard/nature/184.jpg
                                class=card-img-top
                                alt=...
                                />
                                <div class=card-body>
                                <h5 class=card-title> Property ID: $pid</h5>
                                <p class=card-text>
                                    Starting Price: $sp
                                </p>
                                <p class=card-text>
                                    
                                    Current Bid: $rp
                                </p>
                                <p class=card-text>
                                    Expires In:
                                </p>
                                <p id=demo$slayer></p>
                                <script>
    
                                createCountDown('demo$slayer', '$cookie2');
    
                                </script>
                                                
                                <a href=#myModal class='btn btn-block btn-primary' data-toggle=modal>Bid</a>
                                </div>
                            </div> 
                            <hr>
    
                            <div class=bs-example>
                            <!-- Button HTML (to Trigger Modal) -->
                        <!--  <a href=#myModal class=btn btn-lg btn-primary data-toggle=modal>Launch Demo Modal</a> -->
                            <script>
                            $(document).ready(function(){
                                $(#myModal).on(shown.bs.modal, function(){
                                 $(this).find(input[type=text]).focus();
                                     });
                                      });
                        </script>
                            <!-- Modal HTML -->
                            <div id=myModal class=modal fade>
                                <div class=modal-dialog>
                                    <div class=modal-content>
                                        <div class=modal-header>
                                            <h5 class=modal-title>Please Input Bid Amount</h5>
                                            <button type=button class=close data-dismiss=modal>&times;</button>
                                        </div>
                                        <div class=modal-body>
                                            <form>
                                                <div class=form-group>
                                                    <label for=pd>Property ID</label>
                                                    <input type=text  id=pid value=$pid  readonly class=form-control-plaintext>
                                                </div>
                                                <div class=form-group>
                                                    <label for=rp>Current Bid</label>
                                                    <input type=text id=rp value=$rp readonly class=form-control-plaintext>
                                                </div>
                                                <div class=form-group>
                                                    <label for=bida>Bid Amount</label>
                                                    <input type=text class=form-control id=bida>
                                                </div>
                                                
                                            </form>
                                        </div>
                                        <div class=modal-footer>
                                            <button type=button class=btn btn-secondary data-dismiss=modal>Cancel</button>
                                            <button type=button class=btn btn-primary>Bid</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> 
                            
                            
                            
                            
                            
                            
                            ";
    
                    
                            
            }
            
        // Free result set
                        mysqli_free_result($result);
                    } else{
                        echo "<p class='lead'><em>No records were found.</em></p>";
                    }
                        }
    
                    echo "   </div> 
                    </div> 
                <div class=sidebar col-xs-3>
                    <div class=well>sidebar</div>
            </div>
                
            </div>";
    
    
            ?>
       

Answer 1

等待大神答复