Issue when working with same class on multiple fields

Hi,

I have 3 daterange pickers with same class filterdaterange. For first one its opening fine BUT for second and third input the daterange picker is auto closing immedeately after opening. I don’t want to write another jQuery selector and with different class How could i approach it with same class name on multiple fields?

JSFiddle: https://jsfiddle.net/anupalusoft/v8bpb76s/6/

[buburian]

there is a simple way before code fixed

$(".class").each(function(index, element) {
$(element).dateRangePicker(......);
});

[teledirigido]

I have changed this function $(document).on('click.datepicker', outsideClickClose); to the following:

function outsideClickClose(evt) {
  var hasClickedOutside = true;
  var isVisible = function(elem) {
    return !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
  };

  self.each(function(index){
    if (self[index].contains(evt.target)) {
      if ( isVisible($('.date-picker-wrapper')[0]) ) {
        hasClickedOutside = false;
        }
    }
  });
      
      if(hasClickedOutside) {
          if (box.is(':visible')) closeDatePicker();
      }
  }

This worked for me.