get data from multiple clockpickers in the same page

Question

I have cards on my php page. These cards are from my sql. The page goes like this:

$getsql = "SELECT * FROM 2dopuzzler ORDER BY tableid";
$itsresult = $conn->query($getsql);

// Good one...
$current_cat = null;
while($row = $itsresult->fetch_assoc()) {   
    if ($row["tableid"] != $current_cat) {
        if ($current_cat) { // end previous card
            echo "</div></div></div></div>";
        }
        $current_cat = $row["tableid"]; // Table Number
        $timein = $row["timein"]; // Placing Order Time
        // PRINT THE ORDER CARD
        echo "<div class='col s12 m6 l3'>";
        echo "<div class='card'>";
        echo "<div class='card-content '>";
        echo "<div class='row'>";

        echo " <div class='clearfix'><div class='input-group clockpicker-with-callbacks'> 
             <input id='attime' type='text' class='form-control' value=".$row['attime'].">
             <span class='input-group-addon'><span class='glyphicon glyphicon-time'></span></span>
        </div>
        </div>";
        echo "<div class='col s12 m4 l4 card-wtime'> <i class='tiny material-icons'>add</i><span class='card-wtimetext'>$timein</span> </div>";
        echo "<div class='col s12 m4 l4'>   <a class='  card-nday waves-effect waves-light red'> <span class='card-ndaytext'>$current_cat</span> </a></div>";
        echo "<div class='col s12 m4 l4 card-alldone-btn'> <i class='medium material-icons'>check</i> </div>";
        echo "</div>";
        echo "<div class='row'>";
    } 
    echo "<div class='card-line'>";
    echo " -- ". $row["itemdesc"]." <span class='card-line-q'> ". $row["qty"] . "</span>";
    echo "</div>";
}
if ($current_cat) { // end last card
    echo "</div></div></div></div>";
}

And I have clockpicker script at the top of one php file:

<script type="text/javascript">
$('.clockpicker-with-callbacks').clockpicker({
        donetext: 'Done',
        afterDone: function() {
        var attime = $('#attime').val();
        var order_num = "<?php echo $order_number ?>";

        console.log(attime, order_num);
        $.post( "2_settime.php", { 
            attime: attime, order_num: order_num
        })

        }
    })
</script>

These two line are kinda correct: var attime = $('#attime').val(); var order_num = "<?php echo $order_number ?>";

I do get attime but it's just from the first clockpicker. Thes second one returns nothing 'cause it's dynamic. I get $order_number from cycle while.

How can I pass the right varibles to javascript from multiple clockpickers?

Answer 1

I could add an attribute data-details then get/pass that value using $().attr('data-details'), plenty of ways to tackle this