@Mbezdek encountered another issue if you can help me again.

See theses two images of two separate products?

The second one should also show two other colours that are out of stock but just disappear.

This is the code:

<div class="product-details">
                Colour
                <select name="colour" class="colors" data-index="{!! $item->id !!}">
                    <option value="" selected="selected">Please Select</option>
                    @foreach($item->options as $option)
                        <option value="@if ($option->stock > 0) {!! $option->product_id !!}-{!!  $option->colour  !!} @else Out of Stock @endif" data-optionId="{!! $option->id !!}">@if ($option->stock != 0) {!!  $option->colour  !!} @else {!!  $option->colour  !!} (Out of Stock) @endif</option>
                    @endforeach
                </select>
                <br />
                @if($item->availableSizes())
                    Size:
                    <select name="size" class="sizes" data-index="{!!  $item->id  !!}">
                        <option value=""></option>
                    </select>
                @endif
            </div>

Which renders to html as

<div class="product-details">
                Colour
                <select name="colour" class="colors" data-index="612">
                    <option value="" selected="selected">Please Select</option>
                                            <option value=" Out of Stock " data-optionId="1353"> Black (Out of Stock) </option>
                                            <option value=" 612-Mustard " data-optionId="1354"> Mustard </option>
                                            <option value=" 612-Dark grey " data-optionId="1355"> Dark grey </option>
                                    </select>
                <br />
                                    Size:
                    <select name="size" class="sizes" data-index="612">
                        <option value=""></option>
                    </select>
                            </div>

// And the second product as

<div class="product-details">
                Colour
                <select name="colour" class="colors" data-index="609">
                    <option value="" selected="selected">Please Select</option>
                                            <option value=" 609-Black " data-optionId="1345"> Black </option>
                                            <option value=" Out of Stock " data-optionId="1346"> Grey (Out of Stock) </option>
                                            <option value=" Out of Stock " data-optionId="1347"> raspberry (Out of Stock) </option>
                                            <option value=" 609-Mustard " data-optionId="1348"> Mustard </option>
                                    </select>
                <br />
                                    Size:
                    <select name="size" class="sizes" data-index="609">
                        <option value=""></option>
                    </select>
                            </div>

Any idea on why it's only showing for first one but not the rest?