Modal window and 3 animated forms in it. When you press TAB, everything is mixed up, how to fix it?

Question

JavaScript

Subject. Uploaded to free hosting renhor.zzz.com.ua
When you click on login/registration, a modal window opens. It works like this:
The first container is a div to draw a dimmed background.
The second container - it contains absolutely positioned 3 forms to the right of the container's border. When switching between forms, this container takes the size of the current form.
When navigating with TAB, you can see for yourself what is happening.
I would like to get tips on the solution, while I'm inclined to what is needed:
1) When opening a modal window, block the tab on the main page (I don't know how).
2) While the current form is open, the tab should work only on it. (I don’t know how)
By *don't know how* I mean don't know what tools to use and how to use them.
I found 2 useful articles in Yandex, but I could not optimize for my case with three forms.
I no longer ask for ready-made solutions (but if there are such for MY CASE, then I won’t refuse and, I think, I’ll figure it out), but for tips and tools for solving (NOT LIBRARIES, I’m interested in pure js).

Answer 1

Here's what I found:
Keep tabbing within modal pane only
In principle, it worked out. Here is the result:
https://codepen.io/DTX/pen/dVYgMZ
You can try clearing the js window to see how TAB works without additions.