URL navigation behaving strange

I am working on my website. I have separate PHP files that handle rendering and are pointed to by an .htaccess configuration.

Options All -Indexes

RewriteEngine On
RewriteBase /alix

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^essays/?$ essay.php [QSA,NC,L]
RewriteRule ^essays/([^/]*)?$ essay.php?title=$1 [QSA,NC,L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^books/?$ book.php [QSA,NC,L]
RewriteRule ^books/([^/]*)?$ book.php?title=$1 [QSA,NC,L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^([^/]+)/$ index.php [R=301,L]

In the book.html, I have the following link:

<a href="books/hackers-and-painters-big-ideas-from-the-computer-age">Hackers & Painters: Big Ideas from the Computer Age</a>

When I access my page:

enter image description here

Then I try to navigate:

enter image description here

To open a specific URL under the books/ URL. Upon clicking, I get this in Firefox:

http://127.0.0.1/alix/books/books/hackers-and-painters-big-ideas-from-the-computer-age

This same behavior happens when I try to navigate between subpages as well:

E.g., navigating back to Essays from Books URL:

enter image description here

Main navigation is constructed from this:

$navigation_menu = array(
    "home" => "/alix",
    "essays" => "essays",
    "books" => "books",
);