Dynamically added/created Mobiscroller not functioning

Backstory:

In this project I am doing I have a block of code(a few form lines) that is duplicated when a user clicks the "+ add destination" button.

The scroller for picking a time is included in the block of code but since the new content(more destination inputs) is dynamically added/created any of the new scrollers aren't working because they don't see or pick up the javascript code(since page isn't reloaded).

---

Question:

I need to find a way to make it so that when the "+ add destination" button is clicked and a new destination input is created the user can click on the time input and select a time with the mobiscroller.

---

Here is the my jsFiddle for the problem

Here is my code code where the mobiscroller is: <div class="form-spinner"><input type="text" id="scroller" class="input-text" name="scroller" placeholder="00:00"> </div>

and here is the script is:

<script>
$(function(){
// create a timepicker with default settings
$("#scroller").mobiscroll().time({theme: 'android-ics light',
    display: 'modal', mode: 'scroller', showLabel:false, headerText:'Set an arrival time', button3:'clear', button3Text:'Clear' }); // Shorthand for: $("#scroller").mobiscroll({ preset: 'time' });
});
</script>

I know I'm using an id but when I change it to class, something in the mobiscroller script creates an id for the scroller and then each new scroller gets the same id

You'll need to call .mobiscroll() on the new content, as it wasn't called with the $(document).ready(call.

function createNewDestination() {
    count++;
    //Create new content
    var newContent = $('<div/>', {
        html: GetHtml()
    });      
    //Add event handlers to new content
    newContent.find(".spinner-item").click(spinnerItemClicked);
    newContent.mobiscroll().time({theme: 'android-ics light',
        display: 'modal', mode: 'scroller', showLabel:false, clearText:'clear', headerText:'Set an arrival time', button3:'clear', button3Text:'Clear' });
    return newContent;  
}

Additionally, you've got a slight syntax error in getHTML. You're pulling #scroller from the main document, not $html. Change:

$('#check').attr('id', 'check' + count + '');
$('#scroller').attr('id', 'scroller' + count + '');

To:

$html.find('#check').attr('id', 'check' + count + '');
$html.find('#scroller').attr('id', 'scroller' + count + '');

JSFiddle