Turbolinks and Select2 - duplicated select problem

turbolinks-select2.js

// destroy select2 before caching
$(document).on("turbolinks:before-cache", function () {
  if ($('.select-class').first().data('select2') != undefined) $('.select-class').select2('destroy');
});

// initialize select2 on turbolinks:load
$(document).on("turbolinks:load", function () {
  $('.select-class').select2();
});

It worked! Thanks.

document.addEventListener("turbolinks:load", function() {
  $('.select2-container').remove() //remove the select2 container DOM
  $('.select2-input').select2(); // Select2 will just reinit the DOM
})

Thanks alot! only suggestion that worked for me after hours of search