JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
<div class="grid-8-12 clear" id="DatesBlock">
    <div class="grid-5-12 left clear">
        <input id="Dates_Index" name="Dates.Index" type="hidden" value="23" />
        <input id="Dates_23__DateID" name="Dates[23].DateID" type="hidden" value="23" />
        <input id="Dates_23__StartDate" name="Dates[23].StartDate" type="text" value="2014-01-01" />
    </div>
    <div class="grid-2-12"></div>
    <div class="grid-5-12">
        <input id="Dates_23__EndDate" name="Dates[23].EndDate" type="text" value="2013-12-28" />
    </div>
    <div class="grid-5-12 left clear">
        <input id="Dates_Index" name="Dates.Index" type="hidden" value="24" />
        <input id="Dates_24__DateID" name="Dates[24].DateID" type="hidden" value="24" />
        <input id="Dates_24__StartDate" name="Dates[24].StartDate" type="text" value="2013-12-17" />
    </div>
    <div class="grid-2-12"></div>
    <div class="grid-5-12">
        <input id="Dates_24__EndDate" name="Dates[24].EndDate" type="text" value="2013-12-31" />
    </div>
</div>
<div class="grid-2-12 clear"><a href="#" onclick="AddDatesRow()">Add Dates</a>

</div>
<div id="RowTemplate" style="display: inline">
    <div class="grid-5-12 clear">
        <input id="Dates_Index" name="Dates.Index" type="hidden" value="REPLACE_ID" />
        <input id="Dates_REPLACE_ID__DateID" name="Dates[REPLACE_ID].DateID" type="hidden" value="REPLACE_ID" />
        <input id="Dates_REPLACE_ID__StartDate" name="Dates[REPLACE_ID].StartDate" type="text" value="" />
    </div>
    <div class="grid-2-12"></div>
    <div class="grid-5-12">
        <input id="Dates_REPLACE_ID__EndDate" name="Dates[REPLACE_ID].EndDate" type="text" value="" />
    </div>
</div>

CSS

.grid-5-12 { 
    float: left;
}
.clear {
    clear: left;
}

JavaScript

$('input[name="Dates[24].StartDate"]').datepicker({
    dateFormat: 'yy-mm-dd'
});
$('input[name="Dates[24].EndDate"]').datepicker({
    dateFormat: 'yy-mm-dd'
});
$('input[name="Dates[23].StartDate"]').datepicker({
    dateFormat: 'yy-mm-dd'
});
$('input[name="Dates[23].EndDate"]').datepicker({
    dateFormat: 'yy-mm-dd'
});

    function AddDatesRow() {
    var tempIndex = Math.random().toString(36).substr(2, 5);
    var template = $('#RowTemplate');
    var insertItem = template.clone(false);
    insertItem.find('input').each(function () { // Loop through all inputs
        this.id = this.id.replace('REPLACE_ID', tempIndex); // Replace ID
        this.name = this.name.replace('REPLACE_ID', tempIndex); // Replace name
        this.value = this.value.replace('REPLACE_ID', tempIndex); // Replace name
    });
    insertItem.show();
    $('#DatesBlock').append(insertItem.contents());

    $('input[name="Dates[' + tempIndex + '].StartDate"]').datepicker({
        dateFormat: 'yy-mm-dd'
    });
    $('input[name="Dates[' + tempIndex + '].EndDate"]').datepicker({
        dateFormat: 'yy-mm-dd'
    });
}