How to solve this problem using HTML, CSS, and javascript?

See more:

Javascript

CSS3

HTML5

Here is the question

Please see the image to view

ask ques.jpg - Google Drive[^]


https://drive.google.com/file/d/1IHNzXZqECZn6rsD2lX9lKxlZqohleG7y/view?usp=sharing

Box split:

Problem Statement : Initially design a square in a page.

Upon clicking on the square, the square divides itself into four smaller squares of equal size.

Further clicking on any smaller squares divides it equally into 4 more squares.

Note : At any given point the length and breadth of the largest square should be the same as
the initial square size

What I have tried:

I have tried to make single box only.