document.addEventListener('DOMContentLoaded', () => {
    var list = document.querySelector('.list');

    function createElement(tagName, className, attributes, content) {
        var element = document.createElement(tagName);
        if (className) {
            element.className = className;
        }
        if (attributes) {
            var keys = Object.keys(attributes);
            for (var i = 0; i < keys.length; i++) {
                element[keys[i]] = attributes[keys[i]];
            }
        }
        if (content) {
            element.appendChild(document.createTextNode(content));
        }
        return element;
    }

    function createItem() {
        var Item = document.createElement('div');
        Item.className = 'item';
        Item.appendChild(createElement('input', 'key-input', { type: 'text' }));
        Item.appendChild(createElement('input', 'value-input', { type: 'text' }));
        Item.appendChild(createElement('button', 'up-button', { type: 'button' }, '↑'));
        Item.appendChild(createElement('button', 'down-button', { type: 'button' }, '↓'));
        Item.appendChild(createElement('button', 'delete-button', { type: 'button' }, 'x'));
        return Item;
    }

    document.querySelector('.add-button').addEventListener('click', () => {
        list.appendChild(createItem());

    });

    document.querySelector('.delete-button').addEventListener('click', () => {
        list.removeChild(this.Element);

    });

});