Okay, so I'm trying to update some old js/html/jquery code for my work website. I want to modify a section of code which I'm pretty sure is written with horrible inefficiency, but I'm too dumb to know how to make it cleaner and I'm hoping for suggestions.
// BYMONTHDAY Selection
jQuery('#monthday-select button').on('click', function() {
jQuery(this).toggleClass('active');
var bymonthday = []; // Array to Store 'bymonthday' in. Reset it to '' to store new days in below
// Store Selected Days in the BYDAY rule
jQuery('#monthday-select button').each(function() {
// Active class is the selected day, store the ID of active days which contains the short day name for the rrule (ex. MO, TU, WE, etc)
if (jQuery(this).hasClass('active')) {
bymonthday.push(jQuery(this).attr('data-day-num'));
}
});
recurringRule.bymonthday = bymonthday;
// Reset BYDAY Option
recurringRule.byday = "";
// Reset BySetPos
recurringRule.bysetpos = "";
rruleGenerate();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- BYMONTHDAY -->
<div id="monthday-select" class="btn-toolbar months-choice" role="toolbar" style="display:none;">
<input type="radio" name="monthday-pos-select" value="monthday-selected" id="monthday-selected" checked="checked" />
<h4>Which day(s) of the month does this repeat on</h4>
<div class="btn-group" style="display:block;float:none;">
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="1">1</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="2">2</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="3">3</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="4">4</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="5">5</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="6">6</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="7">7</button>
</div>
<div class="btn-group" style="display:block;float:none;">
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="8">8</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="9">9</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="10">10</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="11">11</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="12">12</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="13">13</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="14">14</button>
</div>
<div class="btn-group" style="display:block;float:none;">
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="15">15</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="16">16</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="17">17</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="18">18</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="19">19</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="20">20</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="21">21</button>
</div>
<div class="btn-group" style="display:block;float:none;">
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="22">22</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="23">23</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="24">24</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="25">25</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="26">26</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="27">27</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="28">28</button>
</div>
<div class="btn-group" style="display:block;float:none;">
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="29">29</button>
<button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="30">30</button>
</div>
Any tips would be awesome.
PS This is my first request here so be gentle.