JSFiddle - React, Tailwind, and code Playground

HTML

<div id ="schedule_container">
      <table id="grid">
        <tr class="full_hour" time='0'>
            <td></td>
        </tr>
        <tr class="half_hour" time='0.5'>
            <td></td>
        </tr>
        <tr class="full_hour" time='1'>
            <td></td>
        </tr>
        <tr class="half_hour" time='1.5'>
            <td></td>
        </tr>
        <tr class="full_hour" time='2'>
            <td></td>
        </tr>
        <tr class="half_hour" time='2.5'>
            <td></td>
        </tr>
        <tr class="full_hour" time='3'>
            <td></td>
        </tr>
    </table>
    <ul class="horizontal">
        <li class="add_new_row" style="background-color:#ddd !important;"></li>
    </ul>
</div>

CSS

#grid{
   display:block;
    position: relative;
    width:300px;
    border:1px solid;
    border-collapse:collapse;
    z-index:1;

}

.full_hour td{
    border: 1px solid;
    border-collapse:collapse;
    height:20px;
    width: 300px;   
}

.half_hour td{
    border: 1px solid gray;
    height:20px;
    width: 300px;
}
 #schedule_container{
   height:68%;
   position:relative;
}

ul.horizontal{
padding:0;
z-index:3;
}

ul.horizontal li{
    list-style:none;
   line-height: 1.5em;
display:block;
width:20px;
text-align:center;
float:left;
margin-left:5px;
margin-right:5px;
background-color:#eee;
height:45%
}

JavaScript

var $divBottom = $('#grid');
    var $divOverlay = $('.horizontal');
    var rowPos = $divBottom.position();
    var bottomTop = rowPos.top - 10;
    var bottomLeft = rowPos.left + 25;
    var bottomWidth = $divBottom.css('width');
    var bottomHeight = '330px';

    $divOverlay.css({
        position: 'absolute',
        top: bottomTop,
        left: bottomLeft,
        width: bottomWidth,
        height: bottomHeight

    });
    $(document).on('click', '.add_new_row', function (e) {
        $(this).before('<li><div class="hours"></div></li>');
        // var x = $('body').find($(this)).closest('#grid tr').attr('time');
        var x = e.pageX;
        var y = e.pageY;
        var b= round(e.pageY,20,10);
          

        $('body').find('.hours:last').closest('li').offset({
            top: b
        });
       // $('body').find('.hours:last').closest('li')..css('height', '40px');
          
    });

 function round(number, increment, offset) {
        return Math.ceil((number - offset) / increment ) * increment + offset;
        }