display:none;をカウントせず擬似クラスを適応

参考URL：https://teratail.com/questions/159643
自分は上記のリンクを参考に、ソートを取り付けてみました。想像通りにソートは動いています。
しかし、ソートが表示されるボックスが、偶数と奇数で画像が右左が入れ替わるデザインになっていて、cssの擬似クラス:nth-child(2n)を使用しているため、ソートで引っかからなかったdisplay:none;部分もカウントされてしまい、ソートによっては、画像が交互にならず見栄えが良くありません。

display:none;要素以外をカウントして、擬似クラス:nth-child(2n)が適応されるようにしたいと思っていて、下記のURLで質問されていることかと思い、真似をしてやってみましたが、実装できませんでした。(該当のソースコードとして記載させていただきました)
参考URL:https://teratail.com/questions/182627

java scriptの知識もほぼなく、上記のURLで言われている、jsを付け足し、要素に"x"を入れただけです。。
理解が間違っていますでしょうか？
もしくは他の方法で、display:none;をカウントせず、擬似クラスを適応させる方法があれば教えていただきたいです。

ソースコードを簡素化して作ってみました。sectionがいくつも繰り返される感じで、検索もa,bだけではなくたくさんあります。

該当のソースコード

html
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function(){
4  $('.search span').on('click',function(){
5    $(this).addClass('is-active').siblings().removeClass('is-active');
6    var g=$(this).data('group');
7    if(g==""){
8      $('.shops section').show();
9    }else{
10      $('.shops section').hide();
11      $('.shops [data-group*='+g+']').show();
12    }
13  });
14});
15</script>
16<script>
17let es = document.querySelectorAll("[x]");
18
19es.forEach(e => {e.parentNode.removeChild(e)});
20</script>
21
22<div class="search">
23    <span class="search_item is-active" data-group="">All</span>
24    <span class="search_item" data-group="a">A</span>
25    <span class="search_item" data-group="b">B</span>
26</div>	
27
28<section class="shops" data-group="a,b"x>
29        <div class="shops_img">
30         <img src="○○.jpg">
31        </div>
32        <div class="shops_txt">
33            <p>テキスト</p>
34        </div>
35</section>
36<section class="shops" data-group="a" x>
37        <div class="shops_img">
38         <img src="○○.jpg">
39        </div>
40        <div class="shops_txt">
41            <p>テキスト</p>
42        </div>
43</section>
44<section class="shops" data-group="b" x>
45        <div class="shops_img">
46         <img src="○○.jpg">
47        </div>
48        <div class="shops_txt">
49            <p>テキスト</p>
50        </div>
51</section>

該当のソースコード

css
1.shops .shops_img {
2    float: right;
3}
4.shops .shops_txt {
5    float: left;
6}
7.shops:nth-child(2n) .shops_img {
8    float: left;
9    }
10.shops:nth-child(2n) .shops_txt {
11    float: right;
12}