jquery chaining not working in my html with each function

Question

Here is my html

<div  class="productcheck">

    <div class="expenserow1">
        <select name="product[]" class='product_name'>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
    </div>
    <div class="expenserow2">
        <input type="text" name="productpercent[]" size=3 maxlength=3 value="100">
    </div>
</div>
<div  class="productcheck">
    <div class="expenserow1">
        <select name="product[]" class='product_name'>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
    </div>
    <div class="expenserow2">
        <input type="text" name="productpercent[]" size=3 maxlength=3 value="100">
    </div>
</div>
<div  class="productcheck">
    <div class="expenserow1">
        <select name="product[]" class='product_name'>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
    </div>
    <div class="expenserow2">
        <input type="text" name="productpercent[]" size=3 maxlength=3 value="100">
    </div>

</div>

JS:

<script>
$(document).ready(function(){
  $(".productcheck .expenserow2 input[type='text']").each(function() {
            var product_percentage=$(this).val();
            var product_name=$(this).closest('.product_name:selected').val();
            console.log(product_percentage);
  });
});
</script>

Im getting product_percentage value correctly, but not able to get product_name value.

Answer 1

You need to use correct selector to target the select element. use:

$(this).parent().prev().find('.product_name').val();

Working Demo