クリックした項目に関するもののみを表示するフィルター機能を「MixItUp」ライブラリで実装！

<div class="button__list">
	<div class="button__item all" data-filter="all">全て</div>
	<div class="button__item red" data-filter=".filter-red">赤</div>
	<div class="button__item blue" data-filter=".filter-blue">青</div>
	<div class="button__item green" data-filter=".filter-green">緑</div>
	<div class="button__item yellow" data-filter=".filter-yellow">黄</div>
</div>
<div id="mix-container" class="square__container">
	<div class="square mix filter-red red1"></div>
	<div class="square mix filter-red red2"></div>
	<div class="square mix filter-red red3"></div>
	<div class="square mix filter-red red4"></div>
	<div class="square mix filter-blue blue1"></div>
	<div class="square mix filter-blue blue2"></div>
	<div class="square mix filter-blue blue3"></div>
	<div class="square mix filter-blue blue4"></div>
	<div class="square mix filter-green green1"></div>
	<div class="square mix filter-green green2"></div>
	<div class="square mix filter-green green3"></div>
	<div class="square mix filter-green green4"></div>
	<div class="square mix filter-yellow yellow1"></div>
	<div class="square mix filter-yellow yellow2"></div>
	<div class="square mix filter-yellow yellow3"></div>
	<div class="square mix filter-yellow yellow4"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.1/mixitup.js"></script>
<script>
	document.addEventListener('DOMContentLoaded', function() {
		const mixContainer = document.getElementById('mix-container');
		const mixer = mixitup(mixContainer);
	});
</script>