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.
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.