同じアニメーションボタンを複数個設置したい

Question

前提・実現したいこと

初心者でコードが読めなくて困っております。
お力添え頂けないでしょうか。。。

アニメーションするボタンを複数個設置したいと考えているのですが、一つにしか反応せず、同じコード（数字を変えて）を設置したいボタン数だけコードを記述すれば出来るには出来ました。
ですが、出来れば一つのコードで全てのボタンに反映させる事が出来るならしたいなと思っております。

該当のソースコード

<script src="/js/mo.min.js"></script>

<script>
;(function(window) {

	'use strict';

	function isIOSSafari() {
		var userAgent;
		userAgent = window.navigator.userAgent;
		return userAgent.match(/iPad/i) || userAgent.match(/iPhone/i);
	};

	function isTouch() {
		var isIETouch;
		isIETouch = navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
		return [].indexOf.call(window, 'ontouchstart') >= 0 || isIETouch;
	};
	
	var isIOS = isIOSSafari(),
		clickHandler = isIOS || isTouch() ? 'touchstart' : 'click';

	function extend( a, b ) {
		for( var key in b ) { 
			if( b.hasOwnProperty( key ) ) {
				a[key] = b[key];
			}
		}
		return a;
	}

	function Animocon(el, options) {
		this.el = el;
		this.options = extend( {}, this.options );
		extend( this.options, options );

		this.checked = false;

		this.timeline = new mojs.Timeline();
		
		for(var i = 0, len = this.options.tweens.length; i < len; ++i) {
			this.timeline.add(this.options.tweens[i]);
		}

		var self = this;
		this.el.addEventListener(clickHandler, function() {
			if( self.checked ) {
				self.options.onUnCheck();
			}
			else {
				self.options.onCheck();
				self.timeline.replay();
			}
		});
	}

	Animocon.prototype.options = {
		tweens : [
			new mojs.Burst({})
		],
		onCheck : function() { return false; },
		onUnCheck : function() { return false; }
	};

	var items = [].slice.call(document.querySelectorAll('.item > .heart-btn'));

	function init() {
		/* Icon 1 */
		var el = items[0].querySelector('button.icobutton'), elspan = el.querySelector('span');
		var opacityCurve = mojs.easing.path('M0,0 L25.333,0 L75.333,100 L100,0');
		var translationCurve = mojs.easing.path('M0,100h25.3c0,0,6.5-37.3,15-56c12.3-27,35-44,35-44v150c0,0-1.1-12.2,9.7-33.3c9.7-19,15-22.9,15-22.9');
		var squashCurve = mojs.easing.path('M0,100.004963 C0,100.004963 25,147.596355 25,100.004961 C25,70.7741867 32.2461944,85.3230873 58.484375,94.8579105 C68.9280825,98.6531013 83.2611815,99.9999999 100,100');
		new Animocon(el, {
			tweens : [
				// burst animation (circles)
				new mojs.Burst({
					parent: 		el,
					count: 			6,
					radius: 		{0:150},
					degree: 		50,
					angle:      -25,
					opacity: 		0.3,
					children: {
						fill: 			'#f4226d',
						scale: 			1,
						radius: 		{'rand(5,15)':0},
						duration: 	1700,
						delay: 			350,
						easing: 		mojs.easing.bezier(0.1, 1, 0.3, 1)
					}
				}),
				new mojs.Burst({
					parent: 	el,
					count: 		3,
					degree: 	0,
					radius: 	{80:250},
					angle:   	180,
					children: {
						top: 			[ 45, 0, 45 ],
						left: 		[ -15, 0, 15 ],
						shape: 		'line',
						radius: 	{60:0},
						scale: 		1,
						stroke: 	'#f4226d',
						opacity:  0.4,
						duration: 650,
						delay: 		200,
						easing: 	mojs.easing.bezier(0.1, 1, 0.3, 1)
					},
				}),
				// icon scale animation
				new mojs.Tween({
					duration : 500,
					onUpdate: function(progress) {
						var translateProgress = translationCurve(progress),
							squashProgress = squashCurve(progress),
							scaleX = 1 - 2*squashProgress,
							scaleY = 1 + 2*squashProgress;

						elspan.style.WebkitTransform = elspan.style.transform = 'translate3d(0,' + -180*translateProgress + 'px,0) scale3d(' + scaleX + ',' + scaleY + ',1)';

						var opacityProgress = opacityCurve(progress);
						elspan.style.opacity = opacityProgress;

						el.style.color = progress >= 0.75 ? '#f4226d' : '#f4226d';
					}
				})
			],
			onUnCheck : function() {
				el.style.color = '#f4226d';
			}
		});
		/* Icon 1 */

	}
	
	init();

})(window);
</script>

<ul>
    <li class="item">
        <a href="#">
            <img src="/img_1.jpg" alt="">
        </a>
        <div class="heart-btn">
            <button class="icobutton icobutton--heart"><span class="fa fa-heart"></span></button>
        </div>
    </li>
    <li class="item">
        <a href="#">
            <img src="/img_2.jpg" alt="">
        </a>
	<div class="heart-btn">
            <button class="icobutton icobutton--heart"><span class="fa fa-heart"></span></button>
        </div>
    </li>
    <li class="item">
        <a href="#">
            <img src="/img_3.jpg" alt="">
        </a>
	<div class="heart-btn">
            <button class="icobutton icobutton--heart"><span class="fa fa-heart"></span></button>
        </div>
    </li>
</ul>

試したこと

var items = [].slice.call と var el = items[0] が関係あるのかと思い、調べてみたのですがコードが読めないのもあり、この記述があるからなのかすらわからず、行き詰まってしまいました。

補足情報（FW/ツールのバージョンなど）

使いたいアニメーションのアイコンは下記サイトのアイコンの一つで、こちらのコードを参考にしました。
https://tympanus.net/Development/Animocons/

mo.jsと言うライブラリを使っています。

Comments

[yambejp]

mo.jsとか言うライブラリ使ってます？
その辺りきちんと書かないと、それほど一般に浸透している
技術ではないと思います

[smnsk-15]

ご指摘ありがとうございます！
mo.jsと言うライブラリのようです。
修正させて頂きます！

Answer 1

↓こんな感じでどうでしょうか？

    document.querySelectorAll('.item > .heart-btn').forEach( init );

    function init(item) {
        /* Icon 1 */
        var el = item.querySelector('button.icobutton'), elspan = el.querySelector('span');

Comments

[smnsk-15]

Lhankor_Mhyさん！
ありがとうございます！！
教えて頂いたコードに書き換えたところ、思う形になりました！！
大変助かりました！
教えて頂いたコードを調べて理解出来るよう頑張ってみます！
本当にありがとうございました！！