Html: <Div class="field-design"> <div class="field-garment"> <div> <div class="field-product-search"> <input type="text" value="aaa">

Question

Html: <Div class="field-design"> <div class="field-garment"> <div> <div class="field-product-search"> <input type="text" value="aaa">

</div>
      <div class="field-product-search">
        <input type="text" value="bbb">
      </div>
      <div class="field-product-search">
        <input type="text" value>
      </div>
    </div>
</div>

<div class="field-design">
    <div>

    </div>
</div>
</div>
jquery:
once(
"show",
".field-garment > div",
context
).forEach(wrapper => {
const $wrapper = $(wrapper);

createDesignsInfoinSidebar();
addOneDesignClass();

const $productSearchInput = $(
    ".field-product-search input", $wrapper);

$productSearchInput.each(function () {
    if ($productSearchInput.val() === "") {
      $(this).css("background", "red");
    } else {
      $(this).css("background", "green");
    }
});
В последний инпут не введено значение и соотвественно value пустое, а значит background должен стать красного цвета, но у все инпуты стали зеленого цвета. Где я допустил ошибку?