JSFiddle - React, Tailwind, and code Playground

by marcsmith

HTML

<p class="rightSide">
    <a href="#" id="add">add item to list</a>
    <br />
    <a href="#" id="what">what's in my list?</a>
</p>

<p class="leftSide">
    <ul id="list">
        <li class="item">hey!</li>
        <li class="item">yo!</li>
        <li class="item">yeah you!</li>
    </ul>
</p>

CSS

p.leftSide {
    float: left;
    width: 50%;
}
p.rightSide {
    float: right;
    width: 50%;
}

.item {
    color: red;
}

JavaScript

var $listItems = $('#list .item');

$('#add').bind('click', function() {
    var newItem = $('<li></li>').addClass('item').text('you added ME!');
    $('#list').append(newItem);
});

$('#what').bind('click', function() {
    var allItems = '';
    $('#list .item').each(function(index) {
        if(index === 0) {
            allItems = $(this).text();
        } else {
            allItems = allItems + ", " + $(this).text();
        }
    });
    alert("ALL: " + allItems);

    var allOrigItems = '';
    $listItems.each(function(index) {
        if(index === 0) {
            allOrigItems = $(this).text();
        } else {
            allOrigItems = allOrigItems + ", " + $(this).text();
        }
    });
    alert("ORIG: " + allOrigItems);

});