htmx target error on add book if list is empty

[SpectraX07]

trafficstars

Views/books/table.php line 10 to 16 for book add this button has - hx-target="#books-table-rows" <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> Add

error showing no target as if book list is empty since target part is not being rendered

    <div class="card-body">
        <div class="empty">
            <p class="empty-title">No books</p>
            <p class="empty-subtitle text-muted">
                No books found :(
            </p>
        </div>
    </div>
<?php else: ?>
    <table class="table card-table table-vcenter">
        <thead>
            <tr hx-include="closest .card" hx-swap="morph:outerHTML" hx-target="closest .card">
                <th class="w-1"><?= anchor($table->sortByURL('id'), 'ID', ['hx-get' => site_url($table->sortByURL('id'))]); ?> <?= $table->getSortIndicator('id'); ?></th>
                <th class="col-4"><?= anchor($table->sortByURL('title'), 'Title', ['hx-get' => site_url($table->sortByURL('title'))]); ?> <?= $table->getSortIndicator('title'); ?></th>
                <th class="col-4"><?= anchor($table->sortByURL('author'), 'Author', ['hx-get' => site_url($table->sortByURL('author'))]); ?> <?= $table->getSortIndicator('author'); ?></th>
                <th class="col"></th>
            </tr>
        </thead>
        <tbody id="books-table-rows">
            <?php foreach ($books as $book): ?>
                <?= $this->setVar('book', $book)->include('Michalsn\CodeIgniterHtmxDemo\Views\books\table_row'); ?>
            <?php endforeach; ?>
        </tbody>
    </table>

    <div class="p-2" hx-include="closest .card" hx-swap="outerHTML" hx-target="closest .card">
        <?= $pager->links('default', 'default_htmx_full'); ?>
    </div>

<?php endif; ?>