JSFiddle - React, Tailwind, and code Playground

HTML

<!-- main wrap -->
    <div id="main-wrap" class="main-wrap">

        <!-- main panel -->
        <div class="main-panel">
            <span class="main-panel__add">Добавить элемент</span>
            <span class="main-panel__remove">Удалить выбранный элемент</span>
        </div>
        <!--/main panel -->

        <!-- monitor -->
        <aside class="monitor"></aside>
        <!--/monitor -->

        <!-- content -->
        <div class="content"></div>
        <!--/content -->

    </div>
    <!--/main wrap -->

CSS

.main-wrap {
            width: 600px;;
        }

        .main-panel__add,
        .main-panel__remove {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }

        .main-panel__add:hover {
            text-decoration: none;
        }

        .monitor {
            float: right;
            width: 200px;
        }

        .content {
            width: 400px;
        }

JavaScript

/**
 * Mutation observer. Test application
 *
 * @module MutationObserverTest
 */
(function MutationObserverTest() {

    'use strict';

    var /**
         * Contains main objects
         *
         * @property controls
         */
        controls = {},

        /**
         * Contains event handlers
         *
         * @property handlers
         */
        handlers = {

            /**
             * Add new element to document
             *
             * @method addElementClick
             */
            addElementClick: function () {
                var div = document.createElement('div'),
                    newId = parseInt((Math.random() * 1000)).toString();

                div.setAttribute('data-name', 'element');
                div.innerHTML =
                    '<label for="' + newId + '"> </label>' +
                    '<input id="' + newId + '" type="checkbox" name="some-check">' +
                    '<input type="text" name="some-text">';

                controls.content.appendChild(div);
            },

            /**
             * triggered when click by remove button
             *
             * @method removeElementClick
             */
            removeElementClick: function () {
                var elementForRemove = controls.content.querySelectorAll('input:checked'),
                    elementsCount = elementForRemove.length,
                    i;

                for (i = 0; i < elementsCount; i++) {
                    controls.content.removeChild(elementForRemove[i].parentNode);
                }
            },

            /**
             * Mutation event
             *
             * @method domSubtreeModified
             */
            domSubtreeModified: function (event) {
                console.log('Event: DOMSubtreeModified');
            },

            /**
             * Mutation event
             *
             * @method domNodeInserted
             */
            domNodeInserted: function () {
            ...