プラグイン "select2"で出力したチェックボックスから値を取得して、特定の記事を表示させたいです。

Question

こんにちは。wordoress初心者です。

＊＊＊実現したいこと＊＊＊
参考サイト

参考サイトのように、"Destination => USA"を選択すると、投稿のID(data-destination="440")を取得して、同じページ内にある.category__posts .post内のdata属性(data-reisethema, data-destination)とのIDに一致する記事を表示させたいです。(全く同じ機能)

＊＊＊現在の状況＊＊＊
チェックボックスはpluginの(select2)を使用してチェックボックスを出力しています。
各チェックボックスoptionのvalueには投稿のID（440,63...）が登録されている
選択したらそのvalueに登録されている投稿IDとdata属性は取得できていますが、その後どうやって取得した情報(記事IDとdata属性)と.category__posts .postにある記事のdata属性のIDに一致する記事を表示させたらいいか、ロジックを組み立てられません。
ご教授よろしくお願いします。

もし説明不足がある場合や不明点などもコメントくださると助かります。

<!------- category.php ドロップダウン -------->
<div class="category__filter" data-destination>
  <div class="category__filter__dropdown">
    <select class="select2" id="select2" multiple>
      <option value=""></option>
      <?php $destinations = get_categories(array(
         'parent' => 15,
         'orderby' => 'name',
         'hide_empty' => 1
       ));
       foreach ($destinations as $dest) : ?>
         <option class="category__filter__dropdown__option" value="<?php echo $dest->term_id; ?>" data-destination="<?php echo $dest->term_id; ?>">
           <?php echo $dest->name; ?> (<?php echo $dest->category_count; ?>)
         </option>
       <?php endforeach; ?>
     </select>
     <input class="select_value" type="text" /><!-- ここで選択したIDの取得を確認できる -->
  </div>
</div>

<!------- category.php 一致した記事を表示させるコード(一部抜粋) -------->
<div class="category__posts">
   <?php while ( have_posts() ) : the_post();
     $stars = get_field('sterne');
     $categories = get_relevant_categories(get_the_ID());
   ?>
   <div id="<?php echo get_post_field( 'post_name', get_the_ID() ); ?>" class="post animated" 
　　data-animation="animation-fade-in" 
   data-reisethema="<?php if ($categories['reisethema']) echo $categories['reisethema']->term_id; ?>" 
   data-destination="<?php if ($categories['destination']) echo $categories['destination']->term_id; ?>">
       <div class="post__img">
           <a class="post__content__extra__open"></a>
           <?php the_post_thumbnail('full-hd', array('sizes' => '100vw')); ?>
       </div>
....

<!------- main.js select2(一部抜粋) -------->
$(document).ready(function() {
  $(".select2")
    .select2({
      placeholder: "DESTINATION",
      allowClear: true
    })
    .on("select2:select", function() {
      // 1) Get selected option's IDs
      let selectedID = $(".select_value").val($(this).val());
      console.log(selectedID); // 取得したID=>63,440...

      // 2) var currFilterOption = if category__filter__dropdown__option has attribute "reisethema" -> "reisethema", if not -> "destination" is stored
      var currFilterOption = $(this).attr("data-reisethema")
        ? "reisethema"
        : "destination";
      console.log(currFilterOption); // destination


      //filteredPosts.fadeIn();
    });

  $("#select2").one("select2:open", function(e) {
    $("input.select2-search__field").prop("placeholder", "SUCHE");
  });
});

Answer 1

こちらのコードで自己解決できました。
取得したIDと”.category__posts .post”内にあるdata属性の値を取得して、それで一致するものだけを取得しました。そして一致したIDをfadeInとfadeOutを使用して表示、非表示にしました。

$(document).ready(function() {
  $(".select2")
    .select2({
      placeholder: "DESTINATION",
      allowClear: true
    })
    .on("select2:select", function() {

      // 1) Get selected option's IDs
      let selectedID = $(this)
        .val()
        .toString();
      // alert(selectedID); // array to string 63,440,381...

      // Do filter in class ".category__posts .post" and get each posts's ID. return matches IDs
      const filteredPosts = $(".category__posts .post").filter(function(
        val,　elem) {
        let eachPostIDs = $(elem)
          .data("destination")
          .toString();
        return eachPostIDs === selectedID;
      });
      // console.log(filteredPosts);
      filteredPosts.fadeIn();

      $(".category__posts .post")
        .not(filteredPosts)
        .fadeOut(function() {
          $(window).trigger("scroll");
        });
    });

  $("#select2").one("select2:open", function(e) {
    $("input.select2-search__field").prop("placeholder", "SUCHE");
  });
});