Возникли проблемы с предотвращением дублирования кода CSS

// Second Banner
document.addEventListener("DOMContentLoaded", function(event) {
  let executionFlag = true;
  const toastSecond = document.getElementById("toastSecond");

  const toastCloseSecond = document.getElementById("toastCloseSecond");



  window.onscroll = function(b) {
    const percentToScroll = 0.9; //0.9 of the page
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight * percentToScroll && executionFlag) {


      toastSecond.classList.add("open1");
      executionFlag = false;
    }
  };

  toastCloseSecond.addEventListener("click", function() {
    toastSecond.classList.remove("open1");
  });

})

// First Banner
document.addEventListener("DOMContentLoaded", function(event) {

  (function() {
    requestAnimationFrame(function() {
      var banner;
      banner = document.querySelector('.exponea-banner');
      banner.classList.add('exponea-in');
      return banner.querySelector('.exponea-close').addEventListener('click', function() {
        return banner.classList.remove('exponea-in');
      });
    });

  }).call(this);
});

.exponea-banner {
  font-family: Roboto, sans-serif;
  position: fixed;
  right: 20px;
  bottom: 20px;
  background-color: #2e364d;
  color: #ebeef7;
  padding: 30px 80px 30px 35px;
  font-size: 16px;
  line-height: 1;
  border-radius: 5px;
  box-shadow: 0 3px 30px rgba(116, 119, 176, 0.3);
  opacity: 0;
  transition: opacity 0.2s;
  display: none;
}

.exponea-banner.exponea-in {
  opacity: 1;
  transition-duration: 0.4s;
}

.exponea-banner .exponea-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 10px;
  font-size: 25px;
  font-weight: 300;
  cursor: pointer;
  opacity: 0.75;
}

.exponea-banner .exponea-label {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  opacity: 0.75;
}

.exponea-banner .exponea-text {
  margin-bottom: 8px;
}

.exponea-banner .exponea-count {
  opacity: 0.7;
  font-weight: 300;
  align-items: center;
  display: flex;
}

.exponea-banner .exponea-label {
  text-align: left;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  opacity: 0.75;
}

.exponea-banner,
.exponea-close,
.exponea-text,
.exponea-label,
.exponea-label {
  z-index: 999;
}

.open {
  display: block;
}


/* SecondBanner */

.exponea-banner1 {
  font-family: Roboto, sans-serif;
  position: fixed;
  right: 20px;
  bottom: 20px;
  background-color: #2e364d;
  color: #ebeef7;
  padding: 30px 80px 30px 35px;
  font-size: 16px;
  line-height: 1;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  display: none;
  z-index: 9999999999;
}

.open1 {
  display: block;
}

.exponea-banner1 .exponea-close1 {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 10px;
  font-size: 25px;
  font-weight: 300;
  cursor: pointer;
  opacity: 0.75;
}

.exponea-banner1 .exponea-label1 {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  opacity: 0.75;
}

.exponea-banner1 .exponea-text1 {
  margin-bottom: 8px;
}

.exponea-banner1 .exponea-count1 {
  font-weight: 500;
}

.exponea-banner1 .exponea-label1 {
  text-align: left;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  opacity: 0.75;
}

```

<!-- First banner -->
<div class = "exponea-banner open">
  <div class = "exponea-close">
    &times;
  </div>
  <div class = "exponea-text">
    Ex 1
  </div>
  <div class = "exponea-label">
    - user
  </div>
</div>

<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>
<div> some content </div>

<!-- Second Banner -->
<div class = "exponea-banner1" id = "toastSecond">
  <div class = "exponea-close1" id = "toastCloseSecond">&times;</div>
  <div class = "exponea-text1"> Ex 2
  </div>
  <div class = "exponea-count"> some text</div>
  <div class = "exponea-label1">user</div>
</div>