Q:

Applying first and last child to a certain  id via css and jquery

Basically I want to be able to remove margins below and above the 'non' first and last child duplicates. So I have tried to target the row that has duplicate id's.. in this case #Day2 and #Day6, then I've tried to select the :first-child and the :last-child
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-bottom: 0px !important; } 

I'm not sure if a css only way is able to achieve what I want or if I'm on a somewhat right path with what I'm currently doing.
My attempt to use jquery to do this is:
<script>
    $(document).ready(function () {
        $(document).ajaxComplete(function () {
            var seen = {};
            $('table tr td').each(function() {
                var txt = $(this).text();
                if (seen[txt])
                    $(this).css("margin-bottom", "0px");
                else
                   seen[txt] = true;
            });
        });
   });
</script>

Though this doesn't seem to even remove the margin of a duplicate, nor does my css attempt I'm sure there is a way. Perhaps I cannot use :first-child and :last-child with a tr id? If so is there any other way to achieve what I want?
I greatly appreciate any help, thank you.
JSFiddle
Please view my example here.
**
Solution
**
All achieved without the need for jQuery. Please find the working edition here.
Thanks @Marcin for pointing me towards the solution.
JSFiddle: View Solution

A:

There is only workaround for this:
.Day2 { margin: 0px 0px 5px 0px; }
.Day2 ~ .Day2 td { margin-top: 5px; }

This sets only bottom margin on each .Day2 and then, if there is any .Day2 before, sets margin-top to 5px;
Taken from CSS3 selector :first-of-type with class name?
You shouldn't use the same id on more than one element. Use class instead (for example class="day1").

