I am having difficulty getting a data-filter to load on Page Load and maintain the function of the rest of the data-filters

I am brand new to working with Javascript. I downloaded a free template for my personal portfolio page and was able to achieve everything I wanted with one huge exception that has rendered it unusable for me to distribute to potential employers. Any help is greatly appreciated!! I have tried several different codes but have not been able to achieve what I am trying to do.

On page load, I want the portfolio section only to display the data-filter “all” while still being able to click through the other data-filters and have them display correctly. While I have been able to achieve displaying “all” on page load, two problems occur. 1. All my carousels on the page stop working and display all elements 2. The rest of the data-filters for the section do not function.

Can any one tell me where I am going wrong? I am only including the original template code for the Javascript as all my attempts where wrong. Any and all help is greatly appreciated!!!


JS for the section:
('.filters ul li').click(function(){ (’.filters ul li’).removeClass(‘active’);
$(this).addClass(‘active’);

    var data = $(this).attr('data-filter');
    $grid.isotope({
      filter: data
    })
  });


  if(document.getElementById("portfolio")){
        var $grid = $(".grid").isotope({
          itemSelector: ".all",
          percentPosition: true,
          masonry: {
            columnWidth: ".all"
          }
        })
  };

Portion of the HTML for this portfolio section:

Feature Projects

I enjoyed working on these projects and designing pieces that the clients love.

                <div class="filters">
                    <ul>
                        <li class="active" data-filter="*">All</li>
                        <li data-filter=".web">Web</li>
                        <li data-filter=".print">Print</li>
                        <li data-filter=".interactive">Interactive</li>
                    </ul>
                </div>
                <div class="filters-content grid">
                    <div class="row print all portfolio">

                         <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
                            <img src="img/Portfolio/SP_ads.jpg" style="width:100%;">
                            </div>
                        <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 portfolio-text textright order-md-first">
                            <h3>Print Advertisements</h3>
                            <p>InDesign</p>
                            <h6>Full&nbsp;page magazine advertisements for a luxury petite athletic fashion&nbsp;scompany.</h6>
                            </div>
                    </div>