jQuery Selector: how can I specify one select menu when I have more than one?

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

In your event handler, this will be bound to the relevant <select> element.

$(".product").change(function(event){
  alert($(this).attr('name')); // name of <select> element changed
});

A handy trick is to use "data" attributes to relate something like that <select> to the other fields. That is, you can do something like store the "id" of the related field in a data attribute so that the handler can find the field to mess with:

<select name='whatever' data-quantity-id="whatever" data-price-id="whatever">
  <option ... >
</select>

Then in the handler:

$('.product').change(function(event) {
  var $quantity = $('#' + $(this).data('quantityId'));
  var $price = $('#' + $(this).data('priceId'));

  // ...
});

Answer 2

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