jquery hover / paretens и .find до javascript

Question

Здравствуйте, у меня проблемы с передачей этого кода из jquery в javascript Я не могу представить, как сделать часть зависания, и все родители:

родители ( ".custom-select-wrapper"). find ("select"). val ($ (this) .data ("value"));

$(".custom-option:first-of-type").hover(function() {
  $(this).parents(".custom-options").addClass("option-hover");
}, function() {
  $(this).parents(".custom-options").removeClass("option-hover");
});

$(".custom-select-trigger").on("click", function() {
  $('html').one('click',function() {
    $(".custom-select").removeClass("opened");
  });
  $(this).parents(".custom-select").toggleClass("opened");
  event.stopPropagation();
});

$(".custom-option").on("click", function() {
  $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
  $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
  $(this).addClass("selection");
  $(this).parents(".custom-select").removeClass("opened");
  $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
});

.custom-select-wrapper {
  position: relative;
  display: inline-block;
  user-select: none;
  width: 100%;
}
.custom-select-wrapper select {
  display: none;
}
.custom-select {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-bottom: 50px;
}
.custom-select-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0 84px 0 22px;
  font-size: 22px;
  font-weight: 300;
  color: #fff;
  line-height: 60px;
  background: #5c9cd8;
  border-radius: 4px;
  cursor: pointer;
}
.custom-select-trigger:after {
  position: absolute;
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  top: 50%;
  right: 25px;
  margin-top: -3px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg) translateY(-50%);
  transition: all 0.4s ease-in-out;
  transform-origin: 50% 0;
}
.custom-select.opened .custom-select-trigger:after {
  margin-top: 3px;
  transform: rotate(-135deg) translateY(-50%);
}
.custom-options {
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 100%;
  margin: 15px 0;
  border: 1px solid #b5b5b5;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.07);
  background: #fff;
  transition: all 0.4s ease-in-out;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-15px);
}
.custom-select.opened .custom-options {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
}
.custom-options:before {
  position: absolute;
  display: block;
  content: "";
  bottom: 100%;
  right: 25px;
  width: 7px;
  height: 7px;
  margin-bottom: -4px;
  border-top: 1px solid #b5b5b5;
  border-left: 1px solid #b5b5b5;
  background: #fff;
  transform: rotate(45deg);
  transition: all 0.4s ease-in-out;
}
.option-hover:before {
  background: #f9f9f9;
}
.custom-option {
  position: relative;
  display: block;
  padding: 0 22px;
  border-bottom: 1px solid #b5b5b5;
  font-size: 18px;
  font-weight: 600;
  color: #b5b5b5;
  line-height: 47px;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}
.custom-option:first-of-type {
  border-radius: 4px 4px 0 0;
}
.custom-option:last-of-type {
  border-bottom: 0;
  border-radius: 0 0 4px 4px;
}
.custom-option:hover,
.custom-option.selection {
  background: #f9f9f9;
}

          <div class="service_mode flex">
            <div class="custom-select-wrapper">
              <select
                name="sources"
                id="sources"
                class="custom-select sources"
                placeholder="Source Type"
              >
                <option value="profile">Profile</option>
                <option value="word">Word</option>
                <option value="hashtag">Hashtag</option>
              </select>
              <div class="custom-select sources">
                <span class="custom-select-trigger">
                  Source Type
                </span>
                <div class="custom-options">
                  <span class="custom-option undefined">
                    profile
                  </span>
                  <span class="custom-option undefined">
                    word
                  </span>
                </div>
              </div>
            </div>
          </div>

Я не могу представить, как я получу родителей класса и использую find и применим значение jquery

Может ли кто-нибудь помочь мне с этим?

У меня есть этот код:

function select() {
    const firstOption = document.querySelector(".custom-option:first-of-type");
    const customSelectTrigger = document.querySelector(".custom-select-trigger");
    const customOption = document.querySelector(".custom-option")
    
    customOption.addEventListener("click", function (e) {
      manageOptions(e);
    });
    customSelectTrigger.addEventListener("click", function (e) {
      showOptions(e);
    });
    function showOptions(e) {
      e.preventDefault();
      e.stopPropagation();
      selectWrap.classList.add("active");
    }
    function manageOptions(e){
      e.preventDefault();
      e.stopPropagation();
    }
}