Как отобразить содержимое элементов в раскрывающемся списке в меню активной вкладки?

$(document).ready(function () {
  // Show the dropdown when the "View All" link is clicked
  $(".dropdown").click(function (e) {
    e.stopPropagation(); // Prevent the event from propagating to the parent element
    $(".dropdown-tab").toggleClass("active");
  });

  // Hide the dropdown when the user clicks outside of it
  $(document).click(function (e) {
    if (!$(e.target).closest(".dropdown-tab").length) {
      $(".dropdown-tab").removeClass("active");
    }
  });

  // Switch between tabs
  $(".tabs li.tab-link").click(function () {
    var tab_id = $(this).attr("data-tab");

    $(".tabs li").removeClass("current");
    $(".tab-content").removeClass("current");

    $(this).addClass("current");
    $("#" + tab_id).addClass("current");
  });

  // Show tab content when drop-link is clicked
  $(".dropdown-tab .drop-link").click(function () {
    var tab_id = $(this).attr("data-tab");

    $(".tabs li").removeClass("current");
    $(".tab-content").removeClass("current");

    $(".dropdown-tab").removeClass("active");
    $("#" + tab_id).addClass("current");
    $(".tabs li[data-tab='" + tab_id + "']").addClass("current");
  });
});

.cat-tab {
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}

.tabs {
  position: relative;
  margin: 0px;
  padding: 0px;
  list-style: none;
  border-bottom: 2px solid #e44e4e;
  z-index: 1;
}

.tabs li {
  color: #222;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
}

.tabs li.current {
  background-color: #e44e4e;
  color: #fff;
}

.tabs li.tab-link:last-child {
  float: right;
}

.tab-content {
  display: none;
  background: #fff;
  padding: 15px;
}

.tab-content.current {
  display: inherit;
}

.tabs .dropdown-tab {
  display: none;
}

.tabs .dropdown-tab.active {
  display: block;
}

.tabs .dropdown {
  position: relative;
}

.dropdown-tab {
  position: absolute;
  width: 270px;
  top: 100%;
  right: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  padding: 10px;
  z-index: 90999;
}

.drop-link {
  display: block;
  color: #222;
  padding: 10px 15px;
  cursor: pointer;
}

.drop-link:hover {
  background-color: #f2f2f2;
}

@media screen and (max-width: 500px) {
  ul.tabs > li.dropdown {
    display: block;
  }
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "cat-tab">
  <ul class = "tabs">
    <li class = "tab-link current" data-tab = "tab-1">Tab One</li>
    <li class = "tab-link" data-tab = "tab-2">Tab Two</li>
    <li class = "tab-link" data-tab = "tab-3">Tab Three</li>
    <li class = "tab-link" data-tab = "tab-4">Tab Four</li>
    <li class = "tab-link"><a href = "#" class = "dropdown">View All</a>
      <ul class = "dropdown-tab">
        <li class = "drop-link current" data-tab = "tab-5">Tab 5</li>
        <li class = "drop-link" data-tab = "tab-6">Tab 6</li>
        <li class = "drop-link" data-tab = "tab-7">Tab 7</li>
        <li class = "drop-link" data-tab = "tab-8">Tab 8</li>
        <li class = "drop-link" data-tab = "tab-9">Tab 9</li>
      </ul>
    </li>
  </ul>

  <div id = "tab-1" class = "tab-content current">sometext 1</div>
  <div id = "tab-2" class = "tab-content">sometext 2</div>
  <div id = "tab-3" class = "tab-content">sometext 3</div>
  <div id = "tab-4" class = "tab-content">sometext 4</div>
  <div id = "tab-5" class = "tab-content">sometext 5</div>
  <div id = "tab-6" class = "tab-content">sometext 6</div>
  <div id = "tab-7" class = "tab-content">sometext 7</div>
  <div id = "tab-8" class = "tab-content">sometext 8</div>
  <div id = "tab-9" class = "tab-content">sometext 9</div>
</div>