JQuery select & reset (clear) date range in HTML Calendar - html

Question

I use a HTML calendar in which you can select a date range. Unfortunately it is not possible to delete a selected range. My idea would be to solve this with even and odd:
First click (odd) select first day
Second click (even) select range
Third click (odd) delete all selects and select new first day
Fourth click (even) select new range
...
I am glad about tips and help. I can't get any further on my own.
$(document).ready(function() {
$('td.day').click(function() {
if ($("td.firstClick").length == 0) {
$(this).addClass("firstClick");
}
});
$('td.day').hover(function() {
if ($("td.firstClick").length == 0) {
$(this).addClass("selected");
return;
}
$(this).addClass("secondClick");
var tds = $('td.day');
var firstClick = $(".firstClick");
var firstClickIndex = tds.index(firstClick);
var currentIndex = tds.index(this);
tds.filter(function() {
var idx = tds.index(this);
return idx >= firstClickIndex && idx <= currentIndex;
}).addClass("selected")
}, function() {
if ($("td.firstClick").length == 0) {
$(this).removeClass("selected");
return;
}
$(this).removeClass("secondClick");
var tds = $('td.day');
var firstClick = $(".firstClick");
var firstClickIndex = tds.index(firstClick);
var currentIndex = tds.index(this);
tds.filter(function() {
var idx = tds.index(this);
return idx >= firstClickIndex && idx <= currentIndex;
}).removeClass("selected")
});
$('table').on('click', 'td.secondClick', function() {
$('.selected').addClass('reserved');
});
});
table {
border-collapse: collapse;
}
table tr td {
width: 14%;
}
table tr td:hover {
cursor: pointer;
}
.firstClick {
background: green;
}
.selected {
background: lightgreen;
}
.reserved {
background: red !important;
}
.secondClick {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td colspan="7"><b>2016</b>
</td>
</tr>
<tr>
<td colspan="7"><i>November</i>
</td>
</tr>
<tr>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thu</th>
<th>fri</th>
<th>sat</th>
<th>sun</th>
</tr>
<tr>
<td></td>
<td class="day">1</td>
<td class="day">2</td>
<td class="day">3</td>
<td class="day">4</td>
<td class="day">5</td>
<td class="day">6</td>
</tr>
<tr>
<td class="day">7</td>
<td class="day">8</td>
<td class="day">9</td>
<td class="day">10</td>
<td class="day">11</td>
<td class="day">12</td>
<td class="day">13</td>
</tr>
<tr>
<td class="day">14</td>
<td class="day">15</td>
<td class="day">16</td>
<td class="day">17</td>
<td class="day">18</td>
<td class="day">19</td>
<td class="day">20</td>
</tr>
<tr>
<td class="day">21</td>
<td class="day">22</td>
<td class="day">23</td>
<td class="day">24</td>
<td class="day">25</td>
<td class="day">26</td>
<td class="day">27</td>
</tr>
<tr>
<td class="day">28</td>
<td class="day">29</td>
<td class="day">30</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Answer 1

remove class reserved, selected and secondClick in td.day click function to remove range selected before
$('td.day').click(function() {
if ($("td.firstClick").length == 0) {
$('td.day').removeClass("reserved");
$('td.day').removeClass("selected");
$('td.day').removeClass("secondClick");
$(this).addClass("firstClick");
}
});
and in table td.secondClick click function remove class firstClick to reinit new firstClick
$('table').on('click', 'td.secondClick', function() {
$('.selected').addClass('reserved');
$('td.day').removeClass("firstClick");
});