Получить динамические данные с помощью jquery

Question

Я пытаюсь получить данные, когда мы выбираем значение. Вот Jquery и HTML-код.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script type="text/javascript">
     $(function() {
         $('#colorselector').change(function(){
             $('.colors').hide();
             $('#' + $(this).val()).show();
         });
      });
 </script> 

Теперь вот Html. И этот код работает.

<select id="colorselector">
    <option value="red">Red</option>
    <option value="yellow">Yellow</option>
    <option value="blue">Blue</option>
</Select>
<div id="red" class="colors" style="display:none"> red... </div>
<div id="yellow" class="colors" style="display:none"> yellow.. </div>
<div id="blue" class="colors" style="display:none"> blue.. </div>

Но когда я пытаюсь использовать это с динамическим кодом PHP, этоне работает.

<div class="form-group">
    <label for="address"> Select Product Kit</label>
    <select class="form-group" name="product kit" id="colorselector">
        @foreach($product as $productDeatails)
            <option value='{{$productDeatails->id}}'>{{$productDeatails->title}}
            </option>
        @endforeach
    </select>
    <div id="{{$productDeatails->id}}" class="colors" style="display:none">{{$productDeatails->price}}
 </div>

Answer 1

 @endforeach
</select>
<div id="{{$productDeatails->id}}" class="colors" style="display:none">{{$productDeatails->price}}

Как видите, foreach закончился, прежде чем вы смогли напечатать скрытый div HTML. Из-за этого $productDeatails находится вне области действия и больше не доступно.

Решение состоит в том, чтобы снова запустить foreach для печати скрытых элементов div в HTML, как показано ниже:

<div class="form-group">
    <label for="address"> Select Product Kit</label>
    <select class="form-group" name="product kit" id="colorselector">
        @foreach($product as $productDetails)
            <option value='{{ $productDetails->id }}'>{{ $productDetails->title}}</option>
        @endforeach
    </select>
    @foreach($product as $productDetails)
        <div id="{{ $productDetails->id}}" class="colors" style="display:none">{{ $productDetails->price}}
        </div>
    @endforeach
</div>