JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content"></div>

CSS

.add-controls, .search-controls {
            width: 20em;
            height: 2em;
        }

        input {
            position: absolute;
            left: 6em;
        }

        .button {
            background-color: darkgrey;
            color: white;
            font-weight: bold;
            position: absolute;
            left: 15em;
            border: 1px solid black;
            padding: 0 5px 0 5px;
        }

        .result-controls .button {
            position: relative;
            left: 0;
            font-size: 50%;
            margin-right: 1em;
            padding: 0;
            bottom: 3px;
        }

        li {
            list-style-type: none;
        }

JavaScript

function domSearch(selector, caseType) {
    let addControls = $('<div>')
        .addClass('add-controls')
        .append($('<label>').text('Enter text:').append($('<input>')))
        .append($('<a>')
            .addClass('button')
            .css('display', 'inline-block')
            .text('Add')
            .click(function () {
                let elementText = $('label input');
                let newElement = $('<li>')
                    .addClass('list-item')
                    .append($('<a>').addClass('button').text('X').click(function () {
                        $(this).parent().remove();
                    }))
                    .append($('<strong>').text(elementText.val().trim()));

                $('ul.items-list').append(newElement);
                elementText.val('');
            }));

    let searchControls = $('<div>')
        .addClass('search-controls')
        .append($('<label>').text('Search:').append($('<input>')
            .on('input', function () {
                let needle = $(this).val();
                let items = $('.list-item strong').toArray();
                for (let item of items) {
                    let current = $(item);

                    if (caseType) {
                        if (current.text().indexOf(needle) < 0) {
                            current.parent().css('display', 'none')
                        } else {
                            current.parent().css('display', '')
                        }
                    } else {
                        if (current.text().toLowerCase().indexOf(needle.toLowerCase()) < 0) {
                            current.parent().css('display', 'none')
                        } else {
                            current.parent().css('display', '')
                        }
                    }

                }
            })));

    let resultControls = $('<div>').addClass('result-controls')
        .append($('<ul>').addClass('items-list'));

    $(selector)
      ...