javascript - Using js array in laravel blade foreach

In a laravel blade page I have a controller sending planTypes and stored like this:

arr = [];
var planTypes = @json($planTypes);
$('#multiselect').change(function (e) {
    var plan_id = $(this).val();
    arr.push(plan_id);
});

What it does? For any change in a dropdown listing all planTypes I capture the unique id and store it in a js array (arr)

The user has the possibility to add multiple planTypes in the same page without the need to refresh and that is why the change js function

Whenever I render the new dropdown, I would like to only display the remaining unused planTypes and I try to do it like this:

var item=
            +'            <select id="multiselect" name="planTypes[0][]" class="selectpicker form-control type">'
            +'                <option value="">--</option>'
                            @foreach($planTypes as $planType)
                                if(!arr[{{ $planType->id }}]) {
            +'                    <option value="{{ $planType->id }}">{{ $planType->name }}</option>'
                                }
                            @endforeach

But for some strange reasons, I cannot make it work like that, combining blade @foreach and javascript if

Could someone point me to the correct approach?

Thank you! +' '

Solution:

Try something like this:

<script>
  const planTypes = {!! json_encode($planTypes) !!};
  
  // use this HTML however you want
  let html = `
     <select id="multiselect" name="planTypes[0][]" class="selectpicker form-control type">'
        <option value="">--</option>
        ${planTypes.map(planType => `<option value="${planType.id}">${planType.name}</option>`)}
     </select>
  `;

Solution:

<script>
    var planTypes = {!! json_encode($planTypes) !!};
    var filter_planTypes = planTypes;
    $(document).on('change', '#multiselect', function () {
        var plan_id = $(this).val();
        filter_planTypes = filter_planTypes.filter(function(val) {
            return val.id != plan_id;
        });
        var options = '<option value="">Select</option>';
        $.each(filter_planTypes, function (key, value) {
            options += '<option value="'+ value.id +'">'+ value.name +'</option>';
        });
        $('#multiselect').html(options);
        $('#multiselect').trigger("change");
    });
</script>

OR if you want to use multiselect the better option is to user select2 js library

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />



<select id="multiselect" name="planTypes[]" class="selectpicker form-control type" multiple="multiple">
    <option value="">--</option>
    @foreach($planTypes as $planType)
        <option value="{{ $planType->id }}">{{ $planType->name }}</option>               
    @endforeach
</select>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        // Select2 Multiple
        $('#multiselect').select2({
            placeholder: "Select",
            allowClear: true
        });
    });
</script>