title: Navigation Tabs doesn't display the right output
body: <p>recently i want to use bootstrap navigation tabs on my laravel project, everyhing went good except the navigation tabs. it display all the result instead per category, and i don't know how the script works on navigation tabs in order to display the result by its category. This is the line of the navigation tabs:</p>
  
  <pre><code>&lt;div class="col-lg-8"&gt;
    &lt;div class="card no-b"&gt;
      &lt;div class="card-header"&gt;
          &lt;div class="d-flex justify-content-between"&gt;
            &lt;div class="align-self-center"&gt;
                &lt;strong&gt;Live Streaming&lt;/strong&gt;
            &lt;/div&gt;
            &lt;div class="align-self-end float-right"&gt;
              &lt;ul class="nav nav-tabs card-header-tabs nav-material" role="tablist"&gt;
                  @foreach($radiocategory as $rc)
                  @if($loop-&gt;first)
                  &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link active show" id="{{ $rc-&gt;category_name }}" data-toggle="tab" href="#{{ $rc-&gt;category_name }}"
                         role="tab" aria-controls="tab1" aria-expanded="true" aria-selected="true"&gt;{{ $rc-&gt;category_name }}&lt;/a&gt;
                  &lt;/li&gt;
                  @else
                  &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link show" id="{{ $rc-&gt;category_name }}" data-toggle="tab" href="#{{ $rc-&gt;category_name }}"
                             role="tab" aria-controls="tab1" aria-expanded="true" aria-selected="true"&gt;{{ $rc-&gt;category_name }}&lt;/a&gt;
                      &lt;/li&gt;
                  @endif
                  @endforeach
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card-body no-p"&gt;
          &lt;div class="tab-content" id="v-pills-tabContent1"&gt;
              @foreach($radio as $r)
              @if($loop-&gt;first)
              &lt;div class="tab-pane fade show" id="{{ $r-&gt;category }}" role="tabpanel"
              aria-labelledby="{{ $r-&gt;category }}"&gt;
                  &lt;div class="table-responsive"&gt;
                      &lt;table class="table table-hover earning-box"&gt;
  
                          &lt;tbody&gt;
                          &lt;tr class="no-b"&gt;
                              &lt;td class="w-10"&gt;&lt;span class="round"&gt;
                          &lt;img src="/img/{{ $r-&gt;image }}" alt="{{ $r-&gt;title }}"&gt;&lt;/span&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;h6&gt;{{ $r-&gt;title }}&lt;/h6&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                              &lt;div class="ml-auto"&gt;
                              &lt;a class="btn btn-outline-primary" href="{{ $r-&gt;url }}"&gt;Listen Now&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              @else
              &lt;div class="tab-pane fade" id="{{ $r-&gt;category }}" role="tabpanel"
                      aria-labelledby="{{ $r-&gt;category }}"&gt;
                   &lt;div class="table-responsive"&gt;
                     &lt;table class="table table-hover earning-box"&gt;
  
                       &lt;tbody&gt;
                       &lt;tr class="no-b"&gt;
                           &lt;td class="w-10"&gt;&lt;span class="round"&gt;
                       &lt;img src="/img/{{ $r-&gt;image }}" alt="{{ $r-&gt;title }}"&gt;&lt;/span&gt;
                           &lt;/td&gt;
                           &lt;td&gt;
                               &lt;h6&gt;{{ $r-&gt;title }}&lt;/h6&gt;
                           &lt;/td&gt;
                           &lt;td&gt;
                           &lt;div class="ml-auto"&gt;
                           &lt;a class="btn btn-outline-primary" href="{{ $r-&gt;url }}"&gt;Listen Now&lt;/a&gt;
                           &lt;/div&gt;
                           &lt;/td&gt;
                       &lt;/tr&gt;
                       &lt;/tbody&gt;
                     &lt;/table&gt;
                   &lt;/div&gt;
                 &lt;/div&gt;
              @endif
              @endforeach
          &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is my controller :</p>
  
  <pre><code>public function home() {
        $music = Music::orderByRaw('RAND()')-&gt;get();
        $posts = Posts::orderByRaw('RAND()')-&gt;take(4)-&gt;get();
        $radio = DB::table('radio')
                   -&gt;join('radio_category', 'radio.category', '=', 'radio_category.category_name')
                   -&gt;select('radio.*')
                   -&gt;get();
  
        $radiocategory = RadioCategory::all();
        return view('index',
                     ['music' =&gt; $music,
                      'posts' =&gt; $posts,
                      'radio' =&gt; $radio,
                      'radiocategory' =&gt; $radiocategory
                  ]);
      }
  </code></pre>
  
  <p>The output was :
  <a href="https://i.stack.imgur.com/lCSct.png" rel="nofollow noreferrer">it should be the result that are inside a HardRock category</a>
  What's wrong in my code ?</p>