У меня есть форма, в которой пара переключателей расположена, и названия каждой пары совпадают. Как ограничить количество вариантов. См. Изображение ниже
образец изображения
Как убедиться, что пользователь наконец может выбрать 3 строки и не более?
this html код
<div class="bread-scroll-box" style="">
@foreach ($additives as $additive)
<div class="d-flex justify-content-between hover-bg-gray trs p-3">
<div class="make-cake-img">
<img src="{{ $additive->icon }}" alt="">
</div>
<div class="bread-title w-100 pr-3">
<p class="text-12 weight-800 mb-0">{{ $additive->title }}</p>
<small class="text-gray">{{ $additive->description }}</small>
</div>
<div class="bread-check w-25">
<label class="x-checkbox-no-bg">select
<input type="radio" name="checkbox{{ $additive->id }}" class="right-select" data-weight="{{ round(($additive->weight / 2) * $tray->ratio) }}" data-price="{{ $additive->price }}" data-img="{{ $additive->halfImgUrl }}" data-id="{{ $additive->id }}">
<span class="checkmark"></span>
</label>
</div>
<div class="bread-check w-25">
<label class="x-checkbox-no-bg">double
<input type="radio" name="checkbox{{ $additive->id }}" class="right-select" data-weight="{{ round(($additive->weight / 2) * $tray->ratio) }}" data-price="{{ $additive->price }}" data-img="{{ $additive->doubleHalfImgUrl }}" data-id="{{ $additive->id }}">
<span class="checkmark"></span>
</label>
</div>
</div>
@endforeach
</div>