Php 使用jquery获取动态数据

当我们选择value时，我正在尝试获取数据。 下面是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> 

$（函数（）{
$（'#colorselector'）.change（函数（）{
$（'.colors'）.hide（）；
$（'#'+$（this.val（））.show（）；
});
});

现在是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>

选择产品套件
@foreach（$product as$PRODUCTDETAILS）
{{$productdetails->title}
@endforeach
{{$productdetails->price}

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

<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>