Conflict with MixItUp?

Question

JavaScript

I'm doing a job filter on the site
in the console with the error $(...).mixItUp is not a function I've
broken my head, I don't know how to solve it.
I connected using JQuery like here MixItUp connection example here is the html

code

<div class="work-container">
      <div class="heading-work">
        <h2 class="h1">Filter by type</h2>
        <div class="work-buttons">
          <button class="type-filter" data-filter="all">All</button>
          <button class="type-filter" data-filter=".web-design">Web design</button>
          <button class="type-filter" data-filter=".mobile-design">Mobile design</button>
          <button class="type-filter" data-filter=".photography">Photography</button>
        </div>
      </div>
      <div class="work-items">
        <div class="work-container_item mix-target web-design" data-order="1">
          <div class="work-item_img"><img class="img-responive" src="img/work-item1.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
          <div class="work-item_hover">
            <h2 class="h1">Trand and fashion</h2>
            <span>Web design</span>
            <a href="#" class="button-more"><i class="fa fa-plus"></i></a>
          </div>
        </div>
        <div class="work-container_item mix-target web-design" data-order="2">
          <div class="work-item_img"><img class="img-responive" src="img/work-item1.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
          <div class="work-item_hover">
            <h2 class="h1">Trand and fashion</h2>
            <span>Web design</span>
            <a href="#" class="button-more"><i class="fa fa-plus"></i></a>
          </div>
        </div>
        <div class="work-container_item mix-target web-design" data-order="3">
          <div class="work-item_img"><img class="img-responive" src="img/work-item1.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
          <div class="work-item_hover">
            <h2 class="h1">Trand and fashion</h2>
            <span>Web design</span>
            <a href="#" class="button-more"><i class="fa fa-plus"></i></a>
          </div>
        </div>
        <div class="work-container_item mix-target web-design" data-order="4">
          <div class="work-item_img"><img class="img-responive" src="img/work-item1.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
          <div class="work-item_hover">
            <h2 class="h1">Trand and fashion</h2>
            <span>Web design</span>
            <a href="#" class="button-more"><i class="fa fa-plus"></i></a>
          </div>
        </div>
        <div class="work-container_item mix-target mobile-design" data-order="5">
          <div class="work-item_img"><img class="img-responive" src="img/work-item2.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
          <div class="work-item_hover">
            <h2 class="h1">Trand and fashion</h2>
            <span>Moblie design</span>
            <a href="#" class="button-more"><i class="fa fa-plus"></i></a>
          </div>
        </div>
        <div class="work-container_item mix-target mobile-design" data-order="6">
          <div class="work-item_img"><img class="img-responive" src="img/work-item2.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
          <div class="work-item_hover">
            <h2 class="h1">Trand and fashion</h2>
            <span>Moblie design</span>
            <a href="#" class="button-more"><i class="fa fa-plus"></i></a>
          </div>
        </div>
        <div class="work-container_item mix-target mobile-design" data-order="7">
          <div class="work-item_img"><img class="img-responive" src="img/work-item2.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
          <div class="work-item_hover">
            <h2 class="h1">Trand and fashion</h2>
            <span>Moblie design</span>
            <a href="#" class="button-more"><i class="fa fa-plus"></i></a>
          </div>
        </div>
        <div class="work-container_item mix-target mobile-design" data-order="8">
          <div class="work-item_img"><img class="img-responive" src="img/work-item2.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
          <div class="work-item_hover">
            <h2 class="h1">Trand and fashion</h2>
            <span>Moblie design</span>
            <a href="#" class="button-more"><i class="fa fa-plus"></i></a>
          </div>
        </div>
        <div class="work-container_item mix-target photography" data-order="9">
          <div class="work-item_img"><img class="img-responive" src="img/work-item3.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
          <div class="work-item_hover">
            <h2 class="h1">Trand and fashion</h2>
            <span>Photography</span>
            <a href="#" class="button-more"><i class="fa fa-plus"></i></a>
          </div>
        </div>
        <div class="work-container_item mix-target photography" data-order="10">
          <div class="work-item_img"><img class="img-responive" src="img/work-item3.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
          <div class="work-item_hover">
            <h2 class="h1">Trand and fashion</h2>
            <span>Photography</span>
            <a href="#" class="button-more"><i class="fa fa-plus"></i></a>
          </div>
        </div>
        <div class="work-container_item mix-target photography" data-order="11">
          <div class="work-item_img"><img class="img-responive" src="img/work-item3.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
          <div class="work-item_hover">
            <h2 class="h1">Trand and fashion</h2>
            <span>Photography</span>
            <a href="#" class="button-more"><i class="fa fa-plus"></i></a>
          </div>
        </div>
        <div class="work-container_item mix-target photography" data-order="12">
          <div class="work-item_img"><img class="img-responive" src="img/work-item3.png" alt="Work Item Img"><a href="#" class="work_preview"></a></div>
          <div class="work-item_hover">
            <h2 class="h1">Trand and fashion</h2>
            <span>Photography</span>
            <a href="#" class="button-more"><i class="fa fa-plus"></i></a>
          </div>
        </div>
      </div>
      
  
    </div>

JS

$('.work-items').mixItUp({
    selectors: {
      target: '.mix-target',
      filter: '.type-filter'
    },
    animation: {
    			effects: 'fade rotateZ(-180deg)',
    			duration: 700
  		}
    
  });

Help me please!

Answer 1

First, ALWAYS use the Documentation from the script site first.
In this case it is: https://www.kunkalabs.com/mixitup/docs/get-started/
Plus Examples https://demos.kunkalabs.com/mixitup/
Secondly, as a result you have the following errors
1) You did not specify filtering criteria. You have buttons, but no criteria by which the script should filter. Filter how to filter and sort content: You write categories. then you specify buttons with these categories and prescribe these categories in the content. The filter correlates this data and outputs information. You don't have the original categories right now.
That is, before the buttons, add the following container with the corresponding categories:

<div class="container">
    <div class="mix category-a" data-order="1"></div>
    <div class="mix category-b" data-order="2"></div>
    <div class="mix category-b category-c" data-order="3"></div>
    <div class="mix category-a category-d" data-order="4"></div>
</div>
</div>

2) In JS, you don't include a filter.
Must be

var mixer = mixitup('.container');
var mixer = mixitup(containerEl);
var mixer = mixitup(containerEl, {
    selectors: {
        target: '.blog-item'
    },
    animation: {
        duration: 300
    }
});

In your case, instead of .container, you write your class .work-item and your properties
. And mixitup conflicts with JQuery for some reason. If you use other scripts then put mixitUp last.