JSFiddle - React, Tailwind, and code Playground

by vandanasrivastava

HTML

<div class='location'>
    <div>
        <div>
            <div>
                <div>1</td>
                <div>2</td>
                <div>3</td>
                <div>4</td>
                <div>5</td>
                <div>6</td>
                <div>7</td>
                <td>8</td>
                
                
            </tr>
      </tbody>
    </table>
</div>

CSS

.black{
    font-weight:bold;
}

JavaScript

$(".location table tbody tr").each(function(){
    $(this).find("td").slice(0, 1).wrapAll("<div class='black'></div>");
    $(this).find("td").slice(1, 4).wrapAll("<div class='red'></div>");
    $(this).find("td").slice(4, 8).wrapAll("<div class='white'></div>");
    
});