Sprig component with multiple request only allowing one without refreshing the browser

Question

How do I have multiple Sprig request in the same component?

Additional context

I’ve created a search component that returns table rows in the results. Each row has two entry forms using Sprig that are visible by clicking a button within the row and displaying a modal. The issue is that I can only render one Sprig request without having to do a refresh. I’ve also noticed that I’m having the same issue with pagination. I have four Sprig functions including search, two entry forms, and pagination.

Sprig Component

{% set entry = entry ?? create('craft\\elements\\Entry') %}
<div class="row">
    <div class="col-12 p-4">
        <div class="d-flex flex-row mx-4 my-3">
            {# Search field using Sprig with reactive search #}
            <div class="col-sm-12 col-md-4 col-lg-3 ms-auto">
                {# Sets to a default value if not defined #}
                {% set search = search ?? '' %}
                {% set jobQuery = craft.entries()
                    .section('jobs')
                    .search(search)
                %}
                <div class="">
                    <input sprig s-trigger="keyup changed delay:300ms" s-replace="#board" id="search" class="form-control" type="text" name="search" value="{{ search }}" autocomplete="off" placeholder="Search...">
                </div>
            </div>
        </div>

        <div id="board" class="row mx-4">
            <table id="jobSync" class="table table-dark table-striped table-bordered table-hover">
                <thead class="table-dark">
                <tr>
                    <th data-field="Verified Edit" scope="col">Verified</th>
                    <th data-field="Edit" scope="col">Edit</th>
                </tr>
                </thead>
                <tbody>
                {% set page = page ?? 1 %}
                {% set entryQuery = clone(jobQuery).orderBy('dateUpdated DESC').status(['live','disabled']).limit(limit) %}
                {# Paginates the entry query given the current page #}
                {% set pageInfo = sprig.paginate(entryQuery, page) %}
                {% set entries = pageInfo.pageResults %}

                {% for entry in entries %}
                    {% set rel = entry.defaultJobDescription.one() %}
                    {% set sectionId = craft.app.sections.getSectionByHandle('jobs') %}
                    {% set jobIdEdit = entry.Id %}
                    <tr id="jobRow">
                        <td class="text-center">
                                <form sprig s-action="entries/save-entry" s-method="post" class="form" accept-charset="UTF-8">
                                    {{ hiddenInput('sectionId', '3') }}
                                    {{ hiddenInput('entryId', entry.Id) }}
                                    {{ hiddenInput('fields[verifiedEdit]', '') }}
                                    {{ tag('input', {
                                        id: 'verifiedEdit',
                                        name: 'fields[verifiedEdit]',
                                        value: '1',
                                        checked: (entry.verifiedEdit ?? false) ? true : false,
                                        hidden: 'true'
                                    }) }}
                                    <div class="form-group">
                                        <button class="btn btn-danger btn-sm" type="submit">Verify</button>
                                    </div>
                                </form>
                                {{ _self.errorList(entry.getErrors('fields[verifiedEdit]')) }}
                        </td>
                        <td><button onclick="document.getElementById('jobEdit{{ entry.Id }}').style.display='block'" class="w3-button w3-black-outline">Edit</button></td>

                        {# Edit Form Modals #}
                        {% include '_partials/entryeditmodal' %}
                    </tr>
                {% endfor %}

                </tbody>
            </table>
            {% if entries %}
                {% if page > 1 %}
                    {# Decrements `page` by 1 and pushes the new value into the URL on click #}
                    <button sprig s-val:page="{{ page - 1 }}" s-push-url="?page={{ page - 1 }}">
                        Previous
                    </button>
                {% endif %}
                {% if page < pageInfo.totalPages %}
                    {# Increments `page` by 1 and pushes the new value into the URL on click #}
                    <button sprig s-val:page="{{ page + 1 }}" s-push-url="?page={{ page + 1 }}">
                        Next
                    </button>
                {% endif %}
                <p>
                    <em>
                        Showing {{ pageInfo.first }}-{{ pageInfo.last }}
                        of {{ pageInfo.total }} entries.
                    </em><br>
                    <em>Page {{ pageInfo.currentPage }} of {{ pageInfo.totalPages }} pages.</em><br>
                    {% for i in 1..pageInfo.totalPages %}
                        {% if i == page %}
                            {{ i }}
                        {% else %}
                            {# Refreshes the component and pushes the new value into the URL #}
                            <a sprig s-val:page="{{ i }}" s-push-url="?page={{ i }}">{{ i }}</a>
                        {% endif %}
                    {% endfor %}
                </p>
            {% endif %}
        </div>
    </div>
</div>

Modal Include with entry form using Sprig

<div id="jobEdit{{ entry.Id }}" class="w3-modal">
    <div class="w3-modal-content w3-animate-bottom w3-card-4 w3-round w3-padding-medium w3-padding-10">
        <header class="w3-container">
            <span onclick="document.getElementById('jobEdit{{ entry.Id }}').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        </header>
        <div class="w3-container">
            <form sprig s-method="post" s-action="entries/save-entry" class="form" accept-charset="UTF-8">
                {{ hiddenInput('sectionId', '3') }}
                {{ hiddenInput('enabled', '1') }}
                {{ hiddenInput('entryId', entry.Id) }}
                
                {# Form Fields are here #}
                
                <button class="w3-button w3-round-large w3-margin-bottom w3-block w3-blue" type="submit"><i class="bi bi-save"></i> SAVE UPDATE</button
            </form>
        </div>
    </div>
</div>

[ConversioniaDev]

I just noticed that the </form> tag is getting moved above the form fields and submit button when rendered. The tag is clearly after the submit in the code.

[ConversioniaDev]

Thanks for taking a look.