Заполните textarea индивидуально с выбором из списка созданных php выпадающих

Question

Итак, у меня есть список выпадающих списков, сгенерированных автоматически из базы данных, и для каждого из них у меня автоматически создается текстовая область.

Вот код HTML / PHP:

<div class="row options-content">
<?php if ($options) { ?>
<?php foreach ($options as $option) { ?>
<?php if ($option['type'] == 'select') { ?>
<div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
  <label class="control-label" for="input-option<?php echo $option['product_option_id']; ?>"><?php echo $option['name']; ?></label>
  <select name="option[<?php echo $option['product_option_id']; ?>]" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control">
    <option value=""><?php echo $text_select; ?></option>
    <?php foreach ($option['product_option_value'] as $option_value) { ?>
    <option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
    <?php if ($option_value['price']) { ?>
    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
    <?php } ?>
    </option>
    <?php } ?>
  </select>
</div>
<textarea name="option-<?php echo $option['name']; ?>" rows="1" cols="50" class=""></textarea>
<?php } ?>
<?php } ?>
<?php } ?>

а вот и JavaScript:

<script>
$( "select" )
  .change(function () {
     var str = "";
     $( "select option:selected" ).each(function() {
     str += $( this ).text() + " ";
    });
    $( "textarea" ).text( str );
  })
  .change();
</script>

Кажется, что все работает, за исключением того, что когда первый drowdown в выбранном, он изменяет текст во всех других textarea... как я могу сделать изменения только на обозначенном textarea?

Я попробовал следующее, но тогда больше ничего не работает:

<script>
$( "select" )
  .change(function () {
     var str = "";
     $( "select option:selected" ).each(function() {
     str += $( this ).text() + " ";
    });
    $( "#option-<?php echo $option['name']; ?>" ).text( str );
  })
  .change();
</script>

Answer 1

Сделанные изменения

► Используется $(this) чтобы определить измененное в настоящий момент поле выбора.

$( "select" )
  .change(function () {
     var str = "";
     $(this).find("option:selected" ).each(function() {
         str += $( this ).text() + " ";
     });
     $(this).parent().next().text( str );
  })
  .change();