Trying to hold Cart ID and product quantity through JQuery but its returning unidentified value

This is my HTML and JQuery can anyone tell me where did I go wrong. JQuery is returning unidentified value.

'''

    <div class="col-sm-2 product_data1 border-left">
        {% csrf_token %}
        <input type="hidden" class="product_id1" value={{ item.id }}>
        <select class="changeStatus" value={{ item.product_quantity }} name="quantity">
        <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>

'''

And this is my JQuery

        $(function () {

            var cart_id = $(this).closest('.product_data1').find('.product_id1').val();
            var product_quantity = $(this).closest('.product_data1').find('.changeStatus').val();
            var token = $('input[name=csrfmiddlewaretoken]').val();


            $("select").change(function () {
                alert(cart_id);
                alert(product_quantity);
                alert(token);
            });
        });