JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top_adj1 lft">
        <span>From</span><input type="text" id="fromVal" />
        <span>To</span><input type="text" id="toVal" />
        <input type="button" id="btnClick" value="Submit" />
    </div>
    <br />
    <p>            
        <input     type="checkbox" id="selAll" />Select All
        
        <input     type="checkbox" id="selFirstQuarter" />Select 1st Qtr
        <input     type="checkbox" id="selSecondQuarter" />Select 2nd Qtr
        <input     type="checkbox" id="selThirdQuarter" />Select 3rd Qtr
        <input     type="checkbox" id="selFourthQuarter" />Select 4th Qtr                        
        
    </p>
    <div class="sourceplate1 top_adj1 lft">
        <ul>
            <li></li>
                <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>
                <li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li>
        </ul>
    </div>
    <div class="sourceplate">
        <ul>
            <li>A</li>
                <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
                <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
            
            <li>B</li>
                <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
                <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
            
            <li>C</li>
                <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
                <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
            
            <li>D</li>
               ...

CSS

body
{
    width:580px;
    font-size:12px;

    margin-left:50px;
    /* width depends on sourceplate ul li width.
     Eg.  if
     ii width = 10px  body width =  400 - li  line-height:10px;
     ii width = 15px  body width =  520 - li  line-height:15px;
     ii width = 20px  body width =  640    - li  line-height:20px;
     ii width = 25px  body width =  780 - li  line-height:25px;
     ii width = 30px  body width =  900 - li  line-height:30px;     
     ii width = 35px  body width =  1020 - li  line-height:35px;     
     
     if margin-left of ul =0 else add margin-left value to body width
     
      */
}
.sourceplate ul, .sourceplate1 ul
{list-style-type:none; margin-left:-40px;}
/*  20 * 25 =   */
.sourceplate ul li, .sourceplate1 ul li
{width:20px; height:20px; line-height:20px; color:#000; text-align:center; font-size:10px; border:1px solid #000; float:left; margin:0 2px 2px 0; background:#FFF}

.sourceplate ul li.selected {background:yellow;}
ul
{

 display:block;
 height:auto;
}
p
{

 margin:0 2px 2px 0;
}

JavaScript

$(document).ready(function()
{
    var options            
    options =  $(".sourceplate li");

    $("#selFirstQuarter").click(function()
    {
        if($(this).is(':checked'))
        {
            options.slice(0,401).removeClass("selected");
            $('#selAll').attr('checked', false);
            $('#selSecondQuarter').attr('checked', false);
            $('#selThirdQuarter').attr('checked', false);
            $('#selFourthQuarter').attr('checked', false);
            recFunction(1,12,8);
        }
        else
        {
            options.slice(0,401).removeClass("selected");
        }    
    })

    $("#selSecondQuarter").click(function()
    {
        if($(this).is(':checked'))
        {
            options.slice(0,401).removeClass("selected");
            $('#selAll').attr('checked', false);
            $('#selFirstQuarter').attr('checked', false);
            $('#selThirdQuarter').attr('checked', false);
            $('#selFourthQuarter').attr('checked', false);
            recFunction(13,24,8);
        }
        else
        {
            options.slice(0,401).removeClass("selected");
        }    
    })

    $("#selThirdQuarter").click(function()
    {
        if($(this).is(':checked'))
        {
            options.slice(0,401).removeClass("selected");
            $('#selAll').attr('checked', false);
            $('#selFirstQuarter').attr('checked', false);
            $('#selSecondQuarter').attr('checked', false);
            $('#selFourthQuarter').attr('checked', false);
            recFunction(201,212,8);
        }
        else
        {
            options.slice(0,401).removeClass("selected");
        }    
    })

    $("#selFourthQuarter").click(function()
    {    
        if($(this).is(':checked'))
        {
            options.slice(0,401).removeClass("selected");
            $('#selAll').attr('checked', false);
            $('#selFirstQuarter').attr('checked', false);
            $('#selSecondQuarter').attr('checked', false);
    ...