Performing JS inside PHP loop without it creating many <script> tags?

I'd like part of this simple WordPress plugin I'm working on to write to the footer, and I need to be able to use an inline script so that I can call PHP inside some of the functions that get dates from the back end of my site.

The plugin works fine, but due to the loop that gets each date, the script gets repeated over and over, leading to the footer script looking like this for however many dates are in it:

<script></script>
<script></script>
<script></script>

etc...

Ive tried putting the JS that is inside the loop outside of it and calling it with a function, but it still doesn't work (due to the vars inside the loop it requires), and it still displays loads of script tags in the footer just containing a function call. Anyways, here's my code, hopefully someone has some ideas!

function init_cal(){ ?>

<script>

//Creates lists for each type of date
  var yearList = [];
  var monthList = [];
  var dateList = []
</script>

<?php
if( have_rows('book', 'option') ):
        while ( have_rows('book', 'option') ) : the_row();

        //get the sub field value of the dates from acf
                $bookStart = get_sub_field('cal_date_start', false);
                $bookEnd = get_sub_field('cal_date_end', false); ?>
                <script>

        //finds days between two inputted dates
                var getDates = function(startDate, endDate) {
                    var dates = [],
                            currentDate = startDate,
                            addDays = function(days) {
                                var date = new Date(this.valueOf());
                                date.setDate(date.getDate() + days);
                                return date;
                            };
                    while (currentDate <= endDate) {
                        dates.push(currentDate);
                        currentDate = addDays.call(currentDate, 1);
                    }
                    return dates;
                };

        //takes dates, shortens them and inputs to function above
            var dates = getDates(

          //target start date
          new Date(
            <?php echo substr($bookStart, 0, -4) ?>,
            <?php echo substr($bookStart, 4, -2) ?>,
            <?php echo substr($bookStart, 6) ?>),

          //target end date
          new Date(
            <?php echo substr($bookEnd, 0, -4) ?>,
            <?php echo substr($bookEnd, 4, -2) ?>,
            <?php echo substr($bookEnd, 6) ?>)
          );

        //Gets the outputted dates and appends them to lists
                dates.forEach(function(date) {

                    var month = date.getMonth();

        //12th months shows as 0 for some reason so this sets it back to 12
                    if (month == 0){
                        month = 12;
                    }
                    monthList.push(month);
                    var theDate = date.getDate();
                    dateList.push(theDate);
                    var year = date.getFullYear();

        //days in the 12th month get a year added too early so this sets it back
                    if (month == 12){
                        year = year - 1;
                    }
                    yearList.push(year);

                });
            </script>
    <?php endwhile;
endif;
}
?>

I would really appreciate any help, and sorry if this is formatted improperly, I haven't posted on this site before.