JSFiddle - React, Tailwind, and code Playground

HTML

<table id="calend">
    <tr>
        <td id='td1'  class="day-cell">1</td>
        <td id='td2'  class="day-cell">2</td>
        <td id='td3'  class="day-cell">3</td>
        <td id='td4'  class="day-cell">4</td>
        <td id='td5'  class="day-cell">5</td>
        <td id='td6'  class="day-cell">6</td>
        <td id='td7' >7</td>
    </tr>
</table>

CSS

#calend td {
    -moz-border-right-colors: #999999 #0B0B0B #000000;
    border-right: 3px solid;
    cursor: pointer;
    text-align: right;
}

JavaScript

var td;
    for (var t=1;t<8;t++){
        td = document.getElementById('td'+t);
        if (typeof window.addEventListener==='function'){
                td.addEventListener('click',function(){
                    console.log(td);
            })}
 }