Несколько Daterangepicker

Работает только один хотя id разные

<div class="col-lg-12">
    <input type="text" id="date-picker" placeholder="Date1" readonly="readonly">
</div>
<div class="col-lg-12">
    <input type="text" id="date-picker1" placeholder="Date2" readonly="readonly">
</div>


<script>
// Calendar Init
$(function() {
    $('#date-picker,#date-picker1').daterangepicker({
"locale": {
             format: 'DD.MM.YYYY',
            "applyLabel": "Ок",
            "cancelLabel": "Отмена",
            "fromLabel": "От",
            "toLabel": "До",
            "customRangeLabel": "Произвольный",
            "daysOfWeek": [
                "Вс",
                "Пн",
                "Вт",
                "Ср",
                "Чт",
                "Пт",
                "Сб"
            ],
            "monthNames": [
                "Январь",
                "Февраль",
                "Март",
                "Апрель",
                "Май",
                "Июнь",
                "Июль",
                "Август",
                "Сентябрь",
                "Октябрь",
                "Ноябрь",
                "Декабрь"
            ],
            firstDay: 1
    },
        "opens": "left",

        singleDatePicker: true,    
    
    });     
});

// Calendar animation
$('#date-picker,#date-picker1').on('showCalendar.daterangepicker', function(ev, picker) {
    $('.daterangepicker').addClass('calendar-animated');
});
$('#date-picker,#date-picker1').on('show.daterangepicker', function(ev, picker) {
    $('.daterangepicker').addClass('calendar-visible');
    $('.daterangepicker').removeClass('calendar-hidden');
});
$('#date-picker,#date-picker1').on('hide.daterangepicker', function(ev, picker) {
    $('.daterangepicker').removeClass('calendar-visible');
    $('.daterangepicker').addClass('calendar-hidden');
});



</script>