jQuery - Only target next element

[almo136]

I have the below code that updates some text depending on the option selected from a dropdown.

The issue is that there are a number (they are created dynamically) of these drop downs and text elements that need updated on the same page.

Is it possible to update the code so that only the first .updatedText1 and .updatedText2 elements after the dropdown used are updated. See here for graphic explanation:
[evernote.com...]

<script>
$(".flavour").change(function() {
if ($(".flavour option:selected").val() == 'ginger') {
$('.updatedText1').html('ginger');
$('.updatedText2').html('pear');
}

else if ($(".flavour option:selected").val() == 'watermelon') {
$('.updatedText1').html('watermelon');
$('.updatedText2').html('mint');
}

else if ($(".flavour option:selected").val() == 'lychee') {
$('.updatedText1').html('lychee');
$('.updatedText2').html('lavender');
}
}).change();
</script>

[Fotiman]

Inside your function, this represents the element that changed. You could use that to get a parent container, and then find() the .updateText1 and .updatedText2 elements within. Here's a bit of a dumbed down example:

<div>
 <input type="text" class="flavour">
 <input type="text" class="updatedText1">
 <input type="text" class="updatedText2">
</div>

<div>
 <input type="text" class="flavour">
 <input type="text" class="updatedText1">
 <input type="text" class="updatedText2">
</div>

$(".flavour").change(function() { 
 var $this = $(this);
 if ($this.val() === 'ginger') { 
  $this.parent().find('.updatedText1').val('ginger'); 
  $this.parent().find('.updatedText2').val('pear'); 
 } 
 else if ($this.val() === 'watermelon') { 
  $this.parent().find('.updatedText1').val('watermelon'); 
  $this.parent().find('.updatedText2').val('mint'); 
 } 

 else if ($this.val() === 'lychee') { 
  $this.parent().find('.updatedText1').val('lychee'); 
  $this.parent().find('.updatedText2').val('lavender'); 
 } 
}); 

[almo136]

That doesn't seem to be working but it may be because of the HTML (the flavour class and the updatedtext classes don't have the same direct parent:

<form class="startphtodo" method="post" action="/process/secferm.php">
<select class="flavour" required>
 <option disabled selected value> - select an option - </option>
 <option value="original">Original</option>
 <option value="ginger">Ginger</option>
 <option value="watermelon">Watermelon</option>
 <option value="lychee">Lychee</option>
</select>
<br />
- Where is the <span class="updatedText1"> </span> from?
<input type="text" name="firstflavourfrom" maxlength="30" required />
<br />
- Where is the <span class="updatedText2"> </span> from?
<input type="text" name="secondflavourfrom" maxlength="30" required />
<input type="hidden" name="batchnumber" value="<?php echo $row["batchnumber"] ?>" />
<input type="hidden" name="date" value="<?php echo date("Y-m-d") ?>" />
<br /><input class="button" type="submit" name="submit" value="Complete" />
</form>

[Fotiman]

It looks like they have the same direct parent to me. The <form>. Note, my example is slightly different than yours (my example uses .val() to set the value of input elements, whereas you need .html() to set the HTML content of a span).

[almo136]

It's working! Thanks!

[Fotiman]

Happy to help.