Why value is deleted after alert pop up says that it can not be deleted? – Jquery

Hello i have made a dynamic add and remove input fields and the code works great except the part when you reach the maximum limit to delete fields, this is my code:

function rmv()
    {
        var count = document.getElementsByTagName('input');
        if(count.length > 6){
            $(document).on('click', '#rmvbtn', function () {
                $(this).closest('#dynamic').remove();
            });
        }else{
            alert('Order must have minimum one product-1');
        }
    }

When the alert shows up and i click okay the last field is deleted, i tried debugging the code to see if it enters in the delete function after i press okay but it does not.
The reason there is a 6 is because there are 6 fields by default and user can add more and delete the new added but not the 6 default ones. So this error is deleting fields from the default part.

This is the html part its an edit panel where user can edit orders made for a client, this part is made with Laravel. The rows are printed as much times as many order prodcuts exist so each duplicated row has a button next to it to delete that specific row, this is the code:

@foreach($orders->products as $product)
                                <div id="olddynamic">
                                <div class="row mb-3">
                                    <label for="products" class="col-md-4 col-form-label text-md-end">{{ __('Product') }}</label>
                                    <div class="col-md-6">
                                        <select name="products[]" id="products" type="text" class="form-control @error('products') is-invalid @enderror" required autocomplete="products">
                                            <option value="" selected="true" disabled>{{$product->name}}</option>

                                            @foreach($productList as $item)
                                                <option value="{{$item->id}}">{{$item->name}}</option>
                                            @endforeach
                                        </select>

                                        @error('products')
                                        <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row mb-3">

                                    <label for="amount" class="col-md-4 col-form-label text-md-end">{{ __('Amount') }}</label>

                                    <div class="col-md-6">
                                        <input id="amount" type="text" class="form-control @error('amount') is-invalid @enderror"
                                               name="amount[]" value="{{ $product->pivot->amount }}" required autocomplete="amount">

                                        @error('amount')
                                        <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col"><button type="button" id="oldrmvbtn" onclick="oldrmv()" class="btn btn-primary"><span class="bi bi-dash-lg"></span></button></div>
                                </div>
                            @endforeach

There is also this add row button that adds new rows to the existing order this is the code:

<div class="col"><button type="button" id="addbtn" onclick="add()" class="btn btn-primary"><span class="bi bi-plus"></span></button></div>

This is the whole Javascript code:

<script>
    function add()
    {
        $('#amm').append(
            '<div id="dynamic"><div class="row mb-4"><label for="products" class="col-md-4 col-form-label text-md-end">{{ __("Product") }}</label><div class="col-md-6"><select name="products[]" id="products" type="text" class="form-control @error("products") is-invalid @enderror" required autocomplete="products">@foreach($productList as $item)<option value="{{$item->id}}">{{$item->name}}</option>@endforeach</select>@error("products")<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>@enderror</div></div>  <div class="row mb-3"><label for="amount" class="col-md-4 col-form-label text-md-end">{{ __("Amount") }}</label><div class="col-md-6"><input id="amount" type="text" class="form-control @error("amount") is-invalid @enderror" name="amount[]" required autocomplete="amount">@error("amount")<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>@enderror</div></div> <div class="col"><button type="button" id="rmvbtn" onclick="rmv()" class="btn btn-primary"><span class="bi bi-dash-lg"></span></button></div> </div>'
        );
    }

    function rmv()
    {
        var count = document.getElementsByTagName('input');
        if(count.length > 6){
            $(document).on('click', '#rmvbtn', function () {
                $(this).closest('#dynamic').remove();
            });
        }else{
            alert('Order must have minimum one product-1');
        }
    }

    function oldrmv()
    {
        var count = document.getElementsByTagName('input');
        if(count.length > 6){
            $(document).on('click', '#oldrmvbtn', function () {
                $(this).closest('#olddynamic').remove();
            });
            alert(count.length);
        }else{
            alert('Order must have minimum one product-2');
        }
    }
</script>