How to append @if and @foreach inside a class using onclick function in jQuery

Question

I want to add if and foreach statement inside a class whenever the user select an item from the dropdown box.
The tags that should be added inside is:

• @if($article->tags)
• @foreach($article->tags as $articletag)
• @if($articletag->tag == $(this).text())
  
  

$(this).text() is the text that the user clicks on the dropdownbox. The purpose of these if and foreach is to filter the table based on the filtername($this.text()) whenever the user choose an item from the dropdownbox. How do I do it?

HTML content before the JavaScript runs:

<div class="content">
@if($articles)
    @foreach($articles as $article)
        <div class="row article art-content">
            <div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
                <a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
                    <img src="{{ url('image').'/'.$article->featured_image }}?w=460&h=267&fit=crop" alt="" class="img-responsive"/>
                </a>
            </div>
            <div class="col-xs-12 col-md-6 hidden-md hidden-lg">
                <a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
                    <?php $image = $article->mobile_image != null ? $article->mobile_image : $article->featured_image; ?>
                    <img src="{{ url('image').'/'.$image }}?h=imageHeight" alt="" class="img-responsive"/>
                </a>
            </div>
            <div class="col-xs-12 col-md-6">
                <h3 class="article-title">
                    <a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
                        {{ $article->title }}
                    </a>
                </h3>
                <span>Published on: {{ date('M d, Y', strtotime($article->published_on)) }}</span>
                <div class="spacer20"></div>
                <a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}" class="btn btn-primary">Read Article <i class="fa fa-chevron-right fa-fw"></i> </a>
            </div>
        </div>
        <hr/>
    @endforeach
    <div class="text-center">
        {!! $articles->render() !!}
    </div>
@else
<div class="row spacer50 text-center">
    <div class="col-xs-12 spacer50">
        <h4>The key you entered does not match any articles. <br/>Please click <a href="{{ url('articles') }}">here</a> to see a list of all available articles.</h4>
    </div>
</div>
@endif

HTML content when the JavaScript executes:

<div class="content">
@if($articles)
    @foreach($articles as $article)
        @if($article->tags) //added line
            @foreach($article->tags as $articletag) //added line
                @if($articletag->tag == 'whatever text the dropdown clicks') //added line
                <div class="row article art-content">
                    <div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
                        <a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
                            <img src="{{ url('image').'/'.$article->featured_image }}?w=460&h=267&fit=crop" alt="" class="img-responsive"/>
                        </a>
                    </div>
                    <div class="col-xs-12 col-md-6 hidden-md hidden-lg">
                        <a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
                            <?php $image = $article->mobile_image != null ? $article->mobile_image : $article->featured_image; ?>
                            <img src="{{ url('image').'/'.$image }}?h=imageHeight" alt="" class="img-responsive"/>
                        </a>
                    </div>
                    <div class="col-xs-12 col-md-6">
                        <h3 class="article-title">
                            <a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
                                {{ $article->title }}
                            </a>
                        </h3>
                        <span>Published on: {{ date('M d, Y', strtotime($article->published_on)) }}</span>
                        <div class="spacer20"></div>
                        <a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}" class="btn btn-primary">Read Article <i class="fa fa-chevron-right fa-fw"></i> </a>
                    </div>
                </div>
                <hr/>
                @endif
            @endforeach
        @endif
    @endforeach
    <div class="text-center">
        {!! $articles->render() !!}
    </div>
@else
<div class="row spacer50 text-center">
    <div class="col-xs-12 spacer50">
        <h4>The key you entered does not match any articles. <br/>Please click <a href="{{ url('articles') }}">here</a> to see a list of all available articles.</h4>
    </div>
</div>
@endif

JavaScript:

$('#tags li').on('click', function(){
    $('.content').hide();
    if($(this).text() == 'All')
        $('.content').fadeIn('slow');
    else {
        //add the @foreach and @ifs
    }
});

Answer 1

Looks like you are using Laravel Blade template engine, it is compiled in server. So it could not be changed by JavaScript. And Them could not be used together.

The code like this is wrong

 @if($articletag->tag == $(this).text()) 

So Your need can not be achieved. Maybe you should change your thinking to find another way.