Laravel 5 - edit page for cloned datepicker

I have a JSFiddle which demonstrates my create page. Essentially, I have a table where someone can enter an action and a date. When a new row is added, some javascript is used to clone the row and reset the datepicker for the new row. As you can see in the fiddle, that works fine.

My data is then saved to a database table, one row for each action. Not including all the columns, my table basically looks like the following

action         | deliveryDate  | 
---------------------------------
Walk dog       | 01/01/2016    | 
---------------------------------
Wash clothes   | 08/02/2016    | 
---------------------------------
Party          | 09/02/2016    | 
---------------------------------

This is all good up until this point. The issue is with the edit page for this table. I pass the page the variables it needs, and then I do the following

@foreach($actionPoints as $key => $action)
    <tr id='actionRow{{$key}}'>
        <td>
            {!! Form::text('actionInput['.$key.'][action]', $action->action, array('class' => 'form-control', 'id' => 'actionInput'.$key)) !!}
        </td>
        <td>
            {!! Form::text('actionInput['.$key.'][deliveryDate]', $action->deliveryDate, array('class' => 'form-control dateControl', 'id' => 'dateInput'.$key)) !!}
        </td>
    </tr>
@endforeach

If I view the sourcecode of what is outputted, I see what I expect to see

<tbody>
    <tr id="actionRow0">
        <td>
            <input type="text" value="Walk dog" name="actionInput[0][action]" id="actionInput0" class="form-control">
        </td>
        <td>
            <input type="text" value="2016-02-23" name="actionInput[0][deliveryDate]" id="dateInput0" class="form-control dateControl hasDatepicker">
        </td>
    </tr>
    <tr id="actionRow1">
        <td>
            <input type="text" value="Wash clothes" name="actionInput[1][action]" id="actionInput1" class="form-control">
        </td>
        <td>
            <input type="text" value="2016-02-25" name="actionInput[1][deliveryDate]" id="dateInput1" class="form-control dateControl">
        </td>
    </tr>
</tbody>

So each datepicker element has a unique id. The problem is, because my datepickers were declared dynamically via javascript before, it does not apply to my edit page. As such, only the first datepicker will work. I can't declare a load of datepickers within my javascript because I don't know how many I will need.

Is there any way to get the datepickers working on my edit page? I need to somehow re declare them for every row I have, but not too sure how I can achieve this?

Thanks

via Chebli Mohamed