How to get and set multiple value from html using jquery

I want to make a array list of combining two value from .productids this class and .quantity this class. I already tried like bellow. But problem with this jquery is the productids class value push able to push each productids value but for .quantity its always pushing first value which is 1 which is like ["47:1","48:1"] but it should be like that: ["47:1","48:2"].

Below is the sample code

$("#CheckOutBtn").on("click", function () {
var paymentMethodId = $("#paymentMethod").val();
var selectAddressId = $("#selectAddress").val();

var data = [];
$(".product-row").find(".productids").each(function () {

var qty = $(".product-row").find(".quantity");

data.push($(this).val() + ":" + qty.val());

});

console.log(data);


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr class="product-row">
    <td class="product-col">
        <figure class="product-image-container">
            <a href="product.html" class="product-image">
                <img src="#" alt="product">
            </a>
        </figure>
        <h2 class="product-title">
            <a href="#">Xiaomi Redmi 9a 2/32 price in bangladesh</a>
        </h2>
    </td>
    <td>৳9999.00</td>
    <td>
        <input type="hidden" class="productids" value="47"/>
        <input class="vertical-quantity form-control quantity" value="1" type="text">
    </td>
    <td>৳9999</td>
</tr>
<tr class="product-action-row">
    <td colspan="4" class="clearfix">
        <!--<div class="float-left">
                <a href="#" class="btn-move">Move to Wishlist</a>
            </div>-->
        <!-- End .float-left -->

        <div class="float-right">

            <a href="#" title="Remove product" class="btn-remove"><span class="sr-only">Remove</span></a>
        </div><!-- End .float-right -->
    </td>
</tr>
<tr class="product-row">
    <td class="product-col">
        <figure class="product-image-container">
            <a href="product.html" class="product-image">
                <img src="#" alt="product">
            </a>
        </figure>
        <h2 class="product-title">
            <a href="#">Xiaomi Radmi note 9 4GB/64GB, Price in Bangladesh</a>
        </h2>
    </td>
    <td>৳19999.00</td>
    <td>
        <input type="hidden" class="productids" value="48"/>
        <input class="vertical-quantity form-control quantity" value="2" type="text">
    </td>
    <td>৳19999</td>
</tr>
<tr class="product-action-row">
    <td colspan="4" class="clearfix">
        <!--<div class="float-left">
                <a href="#" class="btn-move">Move to Wishlist</a>
            </div>-->
        <!-- End .float-left -->

        <div class="float-right">

            <a href="#" title="Remove product" class="btn-remove"><span class="sr-only">Remove</span></a>
        </div><!-- End .float-right -->
    </td>
</tr>

Answer

How about looping each of product-row and get the two values?

$("#CheckOutBtn").on("click", function() {
    var paymentMethodId = $("#paymentMethod").val();
    var selectAddressId = $("#selectAddress").val();

    var data = [];
    $(".product-row").each(function() {
        var pid = $(this).find(".productids").val();
        var qty = $(this).find(".quantity").val();

        data.push(pid + ":" + qty);
    });
    console.log(data);
});