CSS, Javascript, XSL, Moving a row in a table to the bottom of the table

I have a stylesheet that I am working on where the html file generated from the stylesheet has a toggle button to change a buttom, in a row, in a table ,from a tick to a cross. All buttons come in by default as checked (ticked) ... when the buttom is clicked the tick changes to a cross. What I would like to happen but cannot do is to move the ENTIRE row to the bottom of the table when clicked. The end result is as a row is clicked the toggle changes to a cross and moves to the base of the table.

Thanks for any help

Tick/cross code

/* Customize the label (the container) */
.customcheck {
  position: relative;
}

.customcheck input {
  display: none;
}

.customcheck input~.checkmark {
  background: #ee0b0b;
  width: 25px;
  display: inline-block;
  position: relative;
  height: 25px;
  border-radius: 2px;
  vertical-align:middle;
  margin-right:10px;
}

.customcheck input~.checkmark:after,
.customcheck input~.checkmark:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 16px;
  background: #fff;
  left: 12px;
  top: 4px;
}

.customcheck input~.checkmark:after {
  transform: rotate(-45deg);
  z-index: 1;
}

.customcheck input~.checkmark:before {
  transform: rotate(45deg);
  z-index: 1;
}

.customcheck input:checked~.checkmark {
  background: #3d8a00;
  width: 25px;
  display: inline-block;
  position: relative;
  height: 25px;
  border-radius: 2px;
}

.customcheck input:checked~.checkmark:after {
  display: none;
}

.customcheck input:checked~.checkmark:before {
  background: none;
  border: 2px solid #fff;
  width: 6px;
  top: 2px;
  left: 9px;
  border-top: 0;
  border-left: 0;
  height: 13px;
  top: 2px;
}

....Stylesheet entry....

<tr class="clickable">
          
<td>
<label class="customcheck">
  <input type="checkbox" checked="checked"/>
  <span class="checkmark"></span>
</label>
</td>