Here is a design mockup along with my current solution. The issue arises when two numbers are adjacent to each other (either horizontally or vertically) as they should merge, illustrated in the mockup below.
For example, when selecting numbers 48-49-50, they should appear like this:
https://i.sstatic.net/9NILe.png
Similarly, numbers 38-39-40-41 from the next screenshot should look like this:
https://i.sstatic.net/HajLk.png
To achieve this effect, I utilize AddClass("active") with the following properties for each clicked number:
a.active {
background-color: #3E9EA5;
border-radius: 9px 9px 9px 9px;
color: white;
}