JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo" data-foo-bar="yes"></div>
<div id="res"></div>

JavaScript

function printL(str) {
    $('#res').append('<div>' + str + '</div>');
}

var res,
    data;

res = '';
data = $('#foo').data();
$.each(data, function(key, val) {
    res += key + ': ' + val + ', ';
});
printL('First data object before asking for any data:');
printL(res);
printL('foo-bar:');
printL($('#foo').data('foo-bar'));
printL('fooBar:');
printL($('#foo').data('fooBar'));


res = '';
data = $('#foo').data();
$.each(data, function(key, val) {
    res += key + ': ' + val + ', ';
});
printL('Now data object after asking foo-bar:');
printL(res);


$('#foo').data('foo-bar', 'no');
$('#foo').data('fooBar', 'maybe');


res = '';
data = $('#foo').data();
$.each(data, function(key, val) {
    res += key + ': ' + val + ', ';
});
printL('Now we changed it both ways:');
printL(res);
printL('foo-bar:');
printL($('#foo').data('foo-bar'));
printL('fooBar:');
printL($('#foo').data('fooBar'));