I have three dropdown boxes with the same class name (dd_ingredient_type_option_ar) in the test code below.
I'm trying to code a .on event to do some work when one of the dropdown boxes changes. The code below triggers the .on event successfully and passes in the index (idx) of the dropdown that changed. However, the .on event fires for all three dropdowns instead of just the one that changed.

The code below produces the following output when dropdown #3 is changed to the second option (Sel2 Opt2-Idx1):

alert box msg: change trigger -select idx: 2
alert box msg: ON event - idx: 2
alert box msg: type: 1

alert box msg: ON event - idx: 2
alert box msg: type: 1

alert box msg: ON event - idx: 2
alert box msg: type: 2

What am I missing in order for the .on event to just fire once on the dropdown that changed?


Code:
<html><body>
<head>
<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script type='text/javascript'>

$(document).ready(function(){
	$('.dd_ingredient_type_option_ar').on('change_ingredient_type_dd', function(event, idx){
		alert('ON event - idx: ' + idx);	
		var ingredient_type = $(this).val(); //dropdown selected item
		alert('type: ' + ingredient_type);
	}); //end on change ingredient type
	
							
			
	$('.dd_ingredient_type_option_ar').change(function(){	
		var idx = $('.dd_ingredient_type_option_ar').index(this);
		alert('change trigger - select idx: ' + idx);	
		$('.dd_ingredient_type_option_ar').trigger('change_ingredient_type_dd', [idx]); //Trigger change event for element (#dd)
	});	
});

</script>
</head>

<form>
	<select class='dd_ingredient_type_option_ar'>
		<option value='1'>Sel0 Opt1-Idx0</option>
		<option value='2'>Sel0 Opt2-Idx1</option>
		<option value='3'>Sel0 Opt3-Idx2</option>
	</select>	
	<br>
	<select class='dd_ingredient_type_option_ar'>
		<option value='1'>Sel1 Opt1-Idx0</option>
		<option value='2'>Sel1 Opt2-Idx1</option>
		<option value='3'>Sel1 Opt3-Idx2</option>
	</select>	
	<br>
	<select class='dd_ingredient_type_option_ar'>
		<option value='1'>Sel2 Opt1-Idx0</option>
		<option value='2'>Sel2 Opt2-Idx1</option>
		<option value='3'>Sel2 Opt3-Idx2</option>
	</select>			
</form>

</body></html>