D3 basic troubles, enter, exit, update

its pretty basic, but at the same time a bit vage whats happening.
i have been checking out this d3.select stuff now for a while, and i still mess it up.

here a codepen link where i try to implement stuff https://codepen.io/ronstarcool/pen/OoMWQV?editors=1010

it has 3 buttons.

expected: click button, see red squars or blue, or yellow.

current reality: click button, see black square. click again, turns red

how to fix this?

I think I am slowly getting it.

Take a look at https://codepen.io/JohnnyBizzel/pen/yxewpM

Here, I set the onClick to remove one item. Note I made the data a global variable. Not sure about the fill color yet. (We can chat about it later)