Error getting page to load with data-filter

Trying to load a specific data-filter when the webpage loads and maintain the functionality of the data-filter menu.

I have tried a few different ways but they did not work.

One way a tried was:

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

I expected the page to load with the "all" data-filter and when you click on the other menu items with data-filters for the objects to display that coincide. However, when I put in this code I get two errors 1. All my carousels on the page in other sections show all elements within them at once and no longer work. 2. On the page load, it shows the "all" data-filter items but the menu items no longer work.

The original javascript code for this section is:

//------- Filter  js --------//  

      $('.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"
              }
            })
      };