JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <thead>
    <tr>
      <th>Day</th>
    </tr>
  </thead>
  <tbody>
    <tr id="Day7">
      <td>7</td>
    </tr>
    <tr id="Day6">
      <td>6</td>
    </tr>
    <tr id="Day6">
      <td>6</td>
    </tr>
    <tr id="Day5">
      <td>5</td>
    </tr>
    <tr id="Day4">
      <td>4</td>
    </tr>
    <tr id="Day3">
      <td>3</td>
    </tr>
    <tr id="Day2">
      <td>2</td>
    </tr>
    <tr id="Day2">
      <td>2</td>
    </tr>
    <tr id="Day2">
      <td>2</td>
    </tr>
    <tr id="Day1">
      <td>1</td>
    </tr>
  </tbody>
</table>

CSS

tr td { 
  float: left;
  padding: 10px; 
  background: #ccc; 
  height: 20px; width: 20px; 
  color: #fff;
  text-align: center;
  margin: 5px 0 !important;
}
tr#Day2 td { background: green !important; }
tr#Day6 td { background: red !important; }

/* Should add a margin & background to the first and last #Day2 */
tr#Day2:first-child td, tr#Day6:first-child td { margin-top: 0px !important; }
tr#Day2:last-child td, tr#Day6:last-child td { margin-top: 0px !important; }

/* Should add a margin to the td of 2nd tr child being 6 */
tr:nth-child(1) td { margin-top: 0px !important; }

/* Should add a margin to td of the first tr child */
tr:first-child td { margin-top: 0px !important;}

JavaScript

$(document).ready(function () {
        $(document).ajaxComplete(function () {
            var seen = {};
            $('tr td').each(function() {
                var txt = $(this).text();
                if (seen[txt])
                    $(this).css("margin-bottom", "0px");
                else
                    seen[txt] = true;
            });
        });
    });