Question

I have 4 select menus, all with the same products. (User is supposed to use the select menus to add products to an invoice).

So each section is composed of a select menu, a quantity text field and a price text fields. But I have FOUR of those in the same page.

Whenever I select a product from the select menu, I want to change the quantity and price. But more specifically, I would just like to know, how to find out WHICH select menu was clicked.

if the select menus have a class of product (.product), when I select a product, ALL sections are affected. But I only want to affect that specific select menu section.

$(".product").change(function(event){
  alert('product picked'); // testing
});

I can’t just append a number, like this: product1, product2, product3. Because then in the javascript file i would have to write 4 different functions

$(".product1").change(function(event){, 
$(".product2").change(function(event){, etc.

I know this is very basic, but I need to refresh my jQuery stuff.

This is some of the form HTML. I only included product select menu and quantity text field for simplification.

<div class="item">
<p>
  Product: 
  <select class="product" id="invoice_line_items_attributes_0_item_id" name="invoice[line_items_attributes][0][item_id]"><option value="1" data-defaultquantity="1">WP setup</option>
  <option value="2" data-defaultquantity="1">WordPress Theme Design</option>
  <option value="3" data-defaultquantity="1">WHE/yr</option>
  <option value="4" data-defaultquantity="1">WHE/mo</option></select>
</p>

Qty: <input class="quantity" id="invoice_line_items_attributes_0_quantity" name="invoice[line_items_attributes][0][quantity]" size="30" type="text" value="1"><br>
</div><hr>

<div class="item">
<p>
  Product: 
  <select class="product" id="invoice_line_items_attributes_1_item_id" name="invoice[line_items_attributes][1][item_id]"><option value="1" data-defaultquantity="1">WP setup</option>
  <option value="2" data-defaultquantity="1">WordPress Theme Design</option>
  <option value="3" data-defaultquantity="1">WHE/yr</option>
  <option value="4" data-defaultquantity="1">WHE/mo</option></select>
</p>
Qty: <input class="quantity" id="invoice_line_items_attributes_1_quantity" name="invoice[line_items_attributes][1][quantity]" size="30" type="text" value="1"><br>
</div><hr>

Answer 1

$(".product").change(function(event){
  $(this).closest(".section").find(".quantity").val("somevalue");
  $(this).closest(".section").find(".price").val("somevalue");
});