Get array of selected dates from availability calendar
<p>I have this availability calendar where multiple dates can be selected. so far I am able to get value of individual cell but not the array of values of total cells selected.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('td').click(function() {
 $(this).toggleClass('active');
});
var tbl = document.getElementById("calender-table");
 if (tbl != null) {
 for (var i = 0; i &lt; tbl.rows.length; i++) {
 for (var j = 0; j &lt; tbl.rows[i].cells.length; j++)
 tbl.rows[i].cells[j].onclick = function () { getval(this); };
            }
        }
 function getval(cel) {
  alert(cel.innerHTML);
 }</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>td {
    width: 50px;
    height: 50px;   
    background-color: blue;
    color:white;
    border: 1px solid black;
}

.active {
    background-color: red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;table align="center" id="calender-table" border="1" style="cursor: pointer;"&gt;
&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;6&lt;/td&gt;&lt;td&gt;7&lt;/td&gt;&lt;td&gt;8&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;9&lt;/td&gt;&lt;td&gt;10&lt;/td&gt;&lt;td&gt;11&lt;/td&gt;&lt;td&gt;12&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;13&lt;/td&gt;&lt;td&gt;14&lt;/td&gt;&lt;td&gt;15&lt;/td&gt;&lt;td&gt;16&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>

<p>I need some assistance on how to get array of theses multiple selected dates and get as an array so that I can insert them to db using PHP/MySql.</p>