rails jqueryでフィルタリング機能を実装したい

前提・実現したいこと

ruby on railsにてニュース投稿型SNSを作っています。
その中でjqueryプラグインのisotopeを用いてフィルタリング機能を実装したいと考えています。

具体的には、ジャンル名を選択することで、そのジャンルに関する記事が表示されるようにしたいです。
現状、bootstrapのテンプレートに元々入っている内容には、フィルタリング機能が効いているのですが、自分で実装した内容には、フィルタリングが効いていない状況になります。通信費や、水道光熱費などには、フィルタリング機能がついていない。

発生している問題・エラーメッセージ

フィルタリング機能テスト

該当のソースコード

ruby
1app/views/articles/index.html.erb
2
3    <%# ジャンルの選択 %>
4        ## <div class="isotope">
5
6        
7          <ul class="nav justify-content-center isotope-options mb-60 pb-30 show-on-scroll" data-show-duration="500"
8            data-show-delay="50">
9            <li class="nav-item active show-on-scroll" data-show-duration="400" data-show-distance="10"
10              data-show-delay="100">
11              <a href="#" data-filter="all" class="nav-link">
12                <div class="nav-link-name">all posts</div>
13              </a>
14            </li>
15
16            <% @genres.drop(1).each do |genre| %>
17            <li class="nav-item show-on-scroll" data-show-duration="400" data-show-distance="10" data-show-delay="150">
18              <a href="#" data-filter="<% genre.name %>" class="nav-link">
19                <div class="nav-link-name"><%=  genre.name %></div>
20              </a>
21            </li>
22            <%end%>
23
24            <li class="nav-item show-on-scroll" data-show-duration="400" data-show-distance="10" data-show-delay="200">
25              <a href="#" data-filter="design" class="nav-link">
26                <div class="nav-link-name">design</div>
27              </a>
28            </li>
29            <li class="nav-item show-on-scroll" data-show-duration="400" data-show-distance="10" data-show-delay="250">
30              <a href="#" data-filter="business" class="nav-link">
31                <div class="nav-link-name">business</div>
32              </a>
33            </li>
34            <li class="nav-item show-on-scroll" data-show-duration="400" data-show-distance="10" data-show-delay="300">
35              <a href="#" data-filter="company" class="nav-link">
36                <div class="nav-link-name">company</div>
37              </a>
38            </li>
39          </ul>
40          <%# ジャンルの選択 %>
41
42          <%# 記事の投稿 %>
43          <div class="row justify-content-center gh-1 show-on-scroll" data-show-duration="700" data-show-delay="250">
44            <div class="col-12 col-lg-10 isotope-grid">
45          <% @articles.each do |article| %>
46                  <%= link_to article_path(article.id) do %>
47              <div class="card card-blog card-horizontal card-md isotope-item my-5" data-filters=<% article.genre.name %>>
48                <div class="card-img">
49                  <%= image_tag article.img, class: "card-img" %>
50                </div>
51                <div class="card-body">
52                  <div class="card-title h5"><%= article.name %></div>
53                  <div class="card-date"> <%= article.created_at.strftime('%Y/%m/%d')%> </div>
54                  <p class="card-text"><%= article.description %></p>
55                  <div class="btn btn-clean">read more<svg class='icon-arrow icon-arrow-right'
56                      width='25' height='10' viewBox='0 0 25 10' fill='none' xmlns='http://www.w3.org/2000/svg'>
57                      <path d='M20 1L24 5L20 9' stroke='currentColor' stroke-width='1.3' stroke-linecap='round'
58                        stroke-linejoin='round' />
59                      <path d='M7 5L24 5' stroke='currentColor' stroke-width='1.3' stroke-linecap='round'
60                        stroke-linejoin='round' /></svg></div>
61                  <% end %>
62                          <div class="data d-flex justify-content-end">
63          <div id="article_<%= article.id %>">
64          <%= render partial: "favorites/favorite", locals: { article: article } %>
65          </div>
66          <div><%= link_to "by #{article.user.name}", user_path(article.user.id), class: :card_user %>
67          </div>
68          </div>
69
70                </div>
71
72              </div>
73          <% end %>

javascript
1dist/assets/js/themebau.min.js
2, function(t, n, e) {
3    "use strict";
4    e.r(n),
5    e.d(n, "initPluginIsotope", function() {
6        return i
7    });
8    var r = e(3);
9    function i() {
10        void 0 !== r.$.fn.isotope && Object(r.$)(".isotope").each(function() {
11            var t = Object(r.$)(this)
12              , n = t.find(".isotope-options")
13              , e = t.attr("data-isotope-mode")
14              , i = {
15                itemSelector: ".isotope-item"
16            };
17            e && (i.layoutMode = e);
18            var o = t.find(".isotope-grid").isotope(i);
19            o.imagesLoaded && o.imagesLoaded().progress(function() {
20                o.isotope("layout")
21            }),
22            n.on("click", "> :not(.active) > a ", function(t) {
23                var n = Object(r.$)(this);
24                n.parent().addClass("active").siblings().removeClass("active");
25                var e = n.attr("data-filter");
26                t.preventDefault(),
27                o.isotope({
28                    filter: function() {
29                        if ("all" === e)
30                            return !0;
31                        var t = Object(r.$)(this).attr("data-filters");
32                        if (t)
33                            for (var n in t = t.split(","))
34                                if (t[n].replace(/\s/g, "") === e)
35                                    return !0;
36                        return !1
37                    }
38                })
39            })
40        })
41    }
42}

ruby
1app/models/genre.rb
2
3class Genre < ActiveHash::Base
4  self.data = [
5
6    { id: 1, name: '--' },
7    { id: 2, name: '通信費' },
8    { id: 3, name: '水道光熱費' },
9    { id: 4, name: '税・社会保障' },
10    { id: 5, name: '保険' },
11    { id: 6, name: '資産運用' },
12    { id: 7, name: 'その他' }
13
14  ]
15
16  include ActiveHash::Associations
17  has_many :articles
18end
19