Fetch Dynamic data with jquery - php

Question

I am trying to fetch Data when we select value.
Here Is Jquery and html code.
<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>
Now Here is Html.And This Code is working .
<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>
But when I am trying to use this with dynamic PHP code this is not Working.
<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}}
As you can see, the foreach has ended before you could print the hidden div HTML. Due to this, $productDeatails is out of scope now and is no longer available.
A solution is to run the foreach again to print the hidden divs in HTML like below:
<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>