Not able to make linked datetimepicker working on rails app - ruby-on-rails

Question

I have the following datetimepicker, which work well and pass the params to the controller. But I would like to make sure that the user cannot select a end date that is before the start date.
<div class="row">
<div class="col-md-2" style="text-align: right;">
</div>
<div class="col-md-3">
<div class="input-group date" id="datetimepicker4" data-target-input="nearest" style="margin-bottom: 20px">
<%= form.text_field(:start, class: "form-control datetimepicker-input", data: {target:"#datetimepicker4"}, placeholder: "#{t :From}") %>
<div class="input-group-append" data-target="#datetimepicker4" data-toggle="datetimepicker">
<div class="input-group-text"><span class="fas fa-calendar-alt"></span></div>
</div>
</div>
</div>
<div class="col-md-2 col-md-offset-1" style="text-align: right;">
</div>
<div class="col-md-3">
<div class="input-group date" id="datetimepicker5" data-target-input="nearest" style="margin-bottom: 20px">
<%= form.text_field(:end, class: "form-control datetimepicker-input", data: {target:"#datetimepicker5"}, placeholder: "#{t :End_time_or_until}") %>
<div class="input-group-append" data-target="#datetimepicker5" data-toggle="datetimepicker">
<div class="input-group-text"><span class="fas fa-calendar-alt"></span></div>
</div>
</div>
</div>
<div class="col-md-1" style="margin-bottom: 20px; text-align: right">
<%= form.button "#{t :Refresh}", class: "btn btn-primary" %>
</div>
</div>
I have the following scripts:
<script>
$(".end_at").change(function (e) {
end_at = $(e.target).val();
start_at = $(".start_at").val();
$.ajax({
type: "POST",
url: "index",
data: {
start_at: start_at,
end_at: end_at,
},
success: function (data) {
$(".chart-container").html(data);
},
});
});
$(function() {
$('#datetimepicker4').datetimepicker({
viewMode: 'days',
dropdownParent: $("#modal-window")
});
$('#datetimepicker5').datetimepicker({
viewMode: 'days',
useCurrent: false,
dropdownParent: $("#modal-window")
});
$('#datetimepicker4').on('dp.change', function (e) {
$('#datetimepicker5').data('DateTimePicker').minDate(e.date);})
$('#datetimepicker5').on('dp.change', function (e) {
$('#datetimepicker4').data('DateTimePicker').maxDate(e.date);
});
});
</script>
Anybody knows what is missing please ? It does look like the form is not connecting to the scripts.

Answer 1

datetimepicker once initiated won't change configurations , so i think on change of start_date datetimepicker you need to destroy end_date's datetimepicker and then reinitiate with the new configs, set minDate in initiation of the end_date datetimepicker.