HamSter

const a = [ 'a', 'b', 'c', 'd' ];
const b = [ 'a', 'b', 'x', 'y', 'z' ];

const c = a.filter(n => b.indexOf(n) === -1);
// или
const c = a.filter(n => !b.includes(n));

function diff(data1, data2, key = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  const keys = new Set(Array.from(data2, getKey));
  return Array.prototype.filter.call(data1, n => !keys.has(getKey(n)));
}


diff([1, 2, 3], [2]) // [1, 3]
diff([{id: 1}, {id: 2}, {id: 3}], [{id: 1}, {id: 3}], 'id') // [{id: 2}]
diff('AbCdE', 'aBc', n => n.toLowerCase()) // ['d', 'E']

const cardSelector = '.post';
const buttonSelector = '.post > img';
const menuSelector = '.post-info';
const activeClass = 'active';

document.addEventListener('click', ({ target: t }) => {
  if (!t.closest(menuSelector)) {
    document.querySelectorAll(menuSelector).forEach(n => n.classList.remove(activeClass));
  }

  if (t.matches(buttonSelector)) {
    t.closest(cardSelector).querySelector(menuSelector).classList.add(activeClass);
  }
});

data: () => ({
  checked: [ 0, 0, 0, 0, 0 ],
}),
methods: {
  onChange(e, index) {
    const checked = e.target.checked;

    this.checked = [
      ...Array(index + checked).fill(1),
      ...Array(this.checked.length - index - checked).fill(0),
    ];
  },
},

<li v-for="(n, i) in checked">
  <label>
    <input
      type="checkbox"
      :checked="n"
      @change="onChange($event, i)"
    >
    {{ i + 1 }}
  </label>
</li>

а если несколько таких списков будет

data: () => ({
  items: [
    { buttonText: '+', className: 'container' },
    { buttonText: '-', className: 'container-fluid' },
  ],
  ...
}),

<button
  v-for="n in items"
  v-text="n.buttonText"
  :class="{ active : active === n.className }"
  @click="active = n.className"
></button>

data: {
    activeClass: 'container'
    ...
},
methods: {
    setActiveClass: function(className) { ... }
}

data: {
    activeClass: 'container',
    buttons: [
      ['+', 'container'],
      ['-', 'container-fluid']
    ]
}

<button  v-for="[label, className] in buttons">...</button>

<button 
         v-for="[label, className] in buttons"
         v-on:click="setActiveClass(className)"
         v-bind:class="{ active: className === activeClass }">
        {{label}}
      </button>

<div :class="isActive ? 'newClass' : 'menu-contain'">

.horizontal-wow {
    visibility: hidden;
    animation-name: null;
}

jQuery.fn.extend({
    custom_onAppearanceApply: function( f, container ) {
        var $container = $( container ),
            container_width = $container.width(),
            array_of_$elements = [];
        this.each(function(i,el) {
            array_of_$elements.push($( el ));
        })
        scrollHandler();

        function watchProcessedElements(array_of_indexes) {
            var l, i;
            for (l = array_of_indexes.length, i = l - 1; i > -1; --i) {
                array_of_$elements.splice(array_of_indexes[i], 1);
            }
        }
        function scrollHandler() {
            var i, l, processed = [];
            for ( l = array_of_$elements.length, i = 0; i < l; ++i ) {

                if (-container.mcs.left + container_width > array_of_$elements[i].position().left) {
                    f.call( array_of_$elements[i] );
                    processed.push(i); 
                }
            }
            if (processed.length) {
                watchProcessedElements(processed);
            }
        }

        return {
            scrollHandler: scrollHandler
        };
    }
})

$(window).load(function() {
    if ($(".js-page-scroll").length) {
        var scrollHandler = $.noop,
            scrollHandlerWrapper = function() {
                scrollHandler();
            };

        $(".js-page-scroll").mCustomScrollbar({
            axis: "x",
            theme: "dark-3",
            advanced: { autoExpandHorizontalScroll: true },
            callbacks: {
                onInit: function() {
                    scrollHandler = $('.horizontal-wow').custom_onAppearanceApply(function () {
                        var old_animation = this.css('animation-name'),
                            $this = this;

                        $this.css('animation-name', 'clear').addClass('animated');

                        setTimeout(function() {
                            $this.css({
                                'visibility': 'visible',
                                'animation-name': ''
                            }); 
                        })

                    }, this).scrollHandler;
                },
                whileScrolling: scrollHandlerWrapper
            }
        });
    }
});

пытаюсь задать вывод сообщения после отправки формы в табе "Дополнительные настройки" по примеру , но получаю ошибку: