get the value of an input type using getElementByClassName in a looped BScard

this is my looped BScard code

<div class="row">
    <?php

        $sqlb = "select * from products where category = 'appetizer'&& status ='active'";
        $resultb = $conn->query($sqlb);
        while($rowb = $resultb->fetch_assoc()){
            $id=$rowb['id'];
            $names=$rowb['names'];
            $price=$rowb['price'];
            $image=$rowb['image'];
            $qty=$rowb['qty'];
            $description=$rowb['description'];
            ?>
        <div class="col-sm col-md-6 col-lg-3 ftco-animate btn-cart" id="<?php echo $id ?>">
            <div id="counter" style="display:none;" aria-hidden="true"></div>
            <div class="room">
                <span class="image d-none"><?php echo $rowb['image']; ?></span>
                <a href="/products<?php echo $rowb['image']; ?>" class="non-insta image-popup img d-flex justify-content-center align-items-center" style="background-image: url(../<?php echo $rowb['image']; ?>);"></a>
                <div class="text p-3 text-center">
                    <div class="btn_cart">
                        <button type="button" class="btn btn-danger btn-circle btn-md rotate" id="add">
                            <i class="fa fa-plus icon-spin"></i>
                    </div>
                    <h3 class="mb-3"> <span class="names"><?php echo $rowb['names']; ?></span></h3>
                    <p><span class="price mr-2">₱<?php echo $rowb['price']; ?>.00</span></p>
                    <p>
                        <input type="text" name="" value="<?php echo $rowb['qty']; ?>" class="item_qty">
                    </p>
                    <ul class="list">
                        <li><span><?php echo $rowb['description']; ?></span></li>
                    </ul>
                </div>
            </div>
        </div>
        <?php } ?>
</div>

and this is my script for getting the value of input type text with class="item_qty"

var item_qty = document.getElementsByClassName("item_qty")[0];

when I was using get elementById it worked just fine because there is only one data, but since I will be using a looped Bootstrap card I figured that I should use getElementsByClassName but it won't/ cant get the data typed by the user.

var item_qty = document.getElementById("item_qty").value;

what I want to get/ my expected result is; to be able to get the value that the user types. For example,the looped card would get 3 results and we would now have 3 cards with 3 different input text. when the user types "15" on the first input text and clicked the button, I want to be able to get the "15" when the button is clicked.

I can already get the other values of the card, such as item_name and description. the only one left is the quantity which is in input text.

I already tried using getElementByID(id).value; to get the user's input and it worked fine with only one card. but when there are multiple cards with the same id, the data gets all tangled up. how can I achieve my expected result? Is there something wrong with my javascript(getElementByClassName("item_qty")[0];)?