JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<div id="widget">
    <input id="add-item" placeholder="Add item" />
    <table id="list"></table>
</div>

JavaScript

var $widget = $('#widget');
var $addItem = $('#add-item');
var $list = $('#list');
//localStorage.setItem('notoriousData', '');
var data = localStorage.getItem('notoriousData') || '';
console.log('data?', data);

if (data) {
    data = JSON.parse(data);
} else {
    data = {};
}

$addItem.on('keyup', function (event) {
    if (event.which === 13) {
        var $this = $(this);
        data[$this.val()] = [];
        console.log('set local storage', JSON.stringify(data));
        localStorage.setItem('notoriousData', JSON.stringify(data));
        $this.val('');
        $list.trigger('refresh');
    }
});

$list.on('refresh', function () {
    console.log('refresh, dammit');
    $list.empty();
    for (key in data) {
        $list.append('<tr data-key="' + key + '"><td>' + key + '</td><td><input type="number" placeholder="price" class="price" data-key="' + key + '"></td><td class="low"></td><td class="high"></td><td class="average"></td></tr>');
        $list.trigger('update', key);
    }
});

$widget.on('keyup', '.price', function (event) {
    if (event.which === 13) {
        var $this = $(this);
        var key = $this.data('key');
        
        if (!data[key]) {
            data[key] = [];
        }
        
        data[key].push($this.val());
        console.log('set local storage price', JSON.stringify(data));
        localStorage.setItem('notoriousData', JSON.stringify(data));
        $this.val('');
        $list.trigger('update', key);
    }
});

function sum(arr) {
    var sum = 0;
    for (var i = 0; i < arr.length; i += 1) {
        sum += Number(arr[i]);
    }
    console.log('arr', arr, 'sum', sum);
    return sum;
}

$list.on('update', function (event, key) {
    console.log('update', arguments);
    console.log('data', data);
    var $item = $(this).find('[data-key="' + key + '"]');
    console.log('$item', $item);
    var $low = $item.find('.low');
    var $high = $item.find('.high');
    var $average = $item.find('.average');
    
   ...