Dynamic HTML form array only submitting last value to PHP

Question

I'm trying to create a system for my organization that keeps track of points for our members. Part of that system is a page where the officers can create events for the members to sign up for in a form. Part of the event creation form is the "shift(s)" for that event, which looks like this:

<div id="shifts-div">
    <div class="form-inline">
        <div class="form-group">
            <label for="start">Start Time: </label>
            <input type="time" class="form-control" name="start[]" value="12:00:00">
        </div>

        <div class="form-group">
            <label for="end">End Time: </label>
            <input type="time" class="form-control" name="end[]" value="12:00:00">
        </div>

        <div class="form-group">
            <label for="end">Spots Available: </label>
            <input type="number" class="form-control" name="spots[]">
        </div>
    </div>
    <br>
</div>

Since there can be any number of shifts for a given event I allow the officers to dynamically add or remove shifts using the following buttons:

<button type="button" class="btn btn-default" onclick="addShift()">
  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Shift
</button>
<button type="button" class="btn btn-default" onclick="removeShift()">
  <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Remove Shift
</button>

Which run these two javascript functions:

function addShift(){
    var shift = 
        `<div class="form-inline">
            <div class="form-group">
                <label for="start">Start Time: </label>
                <input type="time" class="form-control" name="start[]" value="12:00:00">
            </div>

            <div class="form-group">
                <label for="end">End Time: </label>
                <input type="time" class="form-control" name="end[]" value="12:00:00">
            </div>

            <div class="form-group">
                <label for="end">Spots Available: </label>
                <input type="number" class="form-control" name="spots[]">
            </div>
        </div>
        <br>`;

    document.getElementById("shifts-div").innerHTML += shift;
}

and

function removeShift() {
    $('#shifts-div').children().last().remove();
    $('#shifts-div').children().last().remove();
}

This works well as far as adding and removing shifts to the page, but when I submit the form to a php file start, end, and spots are not an array and only hold the values for the last shift. I check this by running this in the php:

foreach($_POST as $key => $value){
    echo $key.' -> '.$value . ' ';
}

So, say I add 3 shifts with different values for each input and click submit, I would get this as the result (I took out the parts I don't think are relevant as they are just other non-array values for the event, like name and date, and are working properly):

start -> 14:00 end -> 17:00 spots -> 3

Where the start, end, and spots values are what I entered for the third shift that was added.

After some research I found that using innerHTML can cause some weird problems since it rewrites every node in the div, so I changed the addShift function to the following just to see if this was the problem (Not the prettiest way to do it, I know)

function addShift(){
    $("#shifts-div").append("<div class='form-inline'><div class='form-group'><label for='start'>Start Time: </label><input type='time' class='form-control' name='start[]' value='12:00:00'></div><div class='form-group'><label for='end'>End Time: </label><input type='time' class='form-control' name='end[]' value='12:00:00'></div><div class='form-group'><label for='end'>Spots Available: </label><input type='number' class='form-control' name='spots[]'></div></div><br>");
}

The same problem persists with the same results. This is my first time doing this kind of web development and this is how I came up with to tackle this problem, but I recognize that there are probably better ways to do this that I am unaware of, so there are two parts to my question:

1. Why isn't my code running how I intend, and how do I fix that?

2. How would an experienced web developer implement the functionality I am after (assuming he was also just using basic javascript, html, and php)?

Like I said I am new, so feel free to critique any parts of my code, even if it doesn't directly solve the problem. There are so many different ways to do anything, it is hard to know which is the "correct" way for any given situation. Thanks in advance and let me know if more of the code needs to be given.

EDIT:

I submit the form with this button:

<button type="submit" class="btn btn-default btn-lg">Submit</button>

and this is what the form looks like:

<form action="../php/create-event.php" method="POST" name="event">

Answer 1

So, it turns out I had just messed up with uploading my changes to the server. Once I changed the innerHTML to jquery as described in the question and properly uploaded it the problem was fixed.

I'm going to leave this question up because even finding that solution took me a long time and I never found anyone directly addressing this problem. If you are having the problem I described above do the change from innerHTML to another DOM manipulation method. The problem has something to do with innerHTML rewriting the entire element and losing references to the elements that were already there.

I'll gladly accept a different answer if someone can come along and explain it better than I can.