Currently I am using 2 libraries which are:
Selectpicker:
<script type="text/javascript" src="{{ asset('assets/vendor/bootstrap-select/bootstrap-select.min.js') }}"></script>
Jquery Repeater:
<script type="text/javascript" src="{{ asset('assets/plugins/jquery-repeater/repeater.min.js') }}"></script>
When I click the button with attribute 'data-repeater-create' my select box shows 2 times
The first select tag has a value inside and the second select tag has nothing
So is there a way when clicking on the 'data-repeater-create' attribute that only shows 1 time the select tag with the value inside?
My HTML in Blade:
<div class="repeater">
<div data-repeater-list="kpiKeys">
<div class="row" data-repeater-item>
<div class="col-8 col-md-8 mb-3">
<select class='selectpicker repeater-select' required style="font-size:var(--fz-12)" title="My key"
data-live-search="true" name="id" data-size="4" data-actions-box="true"
data-live-search-placeholder="Search...">
@foreach ($kpiKeys as $kpiKey)
<option value="{{ $kpiKey->id }}">
{{ $kpiKey->name }}
</option>
@endforeach
</select>
</div>
<div class="col-3 col-md-3 mb-3">
<input type="number" min="0" required class="form-control" placeholder="Value"
name="quantity" />
</div>
<div class="col-1 col-md-1 mb-3 d-flex align-items-center">
<img data-repeater-delete role="button" src="{{ asset('/assets/img/trash.svg') }}" width="20px"
height="20px" />
</div>
</div>
</div>
<div class="col-md-12">
<div class="d-flex justify-content-start">
<div role="button" class="fs-4 text-danger" data-repeater-create><i class="bi bi-plus-circle"></i></div>
</div>
</div>
</div>
i want to show 1 selection per click
