JSFiddle - React, Tailwind, and code Playground

by RVermeulen

HTML

<input id="add" type="button" value="Add">
<div id="links"></div>
<div id="elements"></div>

CSS

#add {
    margin: 0 0 30px 0;
}
#links {
    margin: 0 0 20px 0;
}
#links span {
    cursor: pointer;
    margin: 0 0 5px 0;
    display: block;
}
#links span:hover {
    text-decoration: underline;
}
#elements {
    padding: 20px;
    border: 1px solid #000;
}
#elements .element {
    padding: 10px;
    background: #000;
    margin: 0 0 1px 0;
    color: #fff;
}
#elements .highlight {
    background: yellow;
}
}

JavaScript

function numbers() {
    return $('#links span').length;
}

$('#add').on('click', function () {
    $('#links').append('<span number="' + (numbers() + 1) + '">Remove element ' + (numbers() + 1) + '</span><br />');
    $('#elements').append('<div number="' + numbers() + '" class="element">Element ' + numbers() + '</div>');
});

$('#links span').live('hover', function () {
    var number = $(this).attr('number');
    if ($('#elements .element').attr('number') == number) {
        $(this).addClass('highlight');
    }
});