How exactly does document.cookie work?

document.cookie has very special behavior. As you've seen, assigning to it adds (or updates) a cookie (or multiple cookies), rather than replacing all of the cookies. It's very unusual.

Read all about it on MDN.

Why not have a look at MDN?

The string on the right side of the assignment operator to document.cookies should be a semicolon separated list of key-value pairs, i.e. document.cookie = "aKey=5" will set/update the aKey cookie.

So yes, document.cookie shows special behavior.

Here is an example of your "issue". Also, it says the following:

You can delete a cookie by simply updating its expiration time to zero.