JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dataDiv" data-key="ken" data-another-key="jameson"></div>
<a href="#" id="changeData">change data-key value</a>
<ul id="log"></ul>

JavaScript

var $dataDiv = $('#dataDiv');
var $log = $('ul');

var addLog;
(addLog = function(logText, logValue) {
    $log.append('<li>' + logText + ' = ' + logValue + '</li>');
//    console.log($dataDiv.data());
})('Initial data-key', $dataDiv.data('key'));

$('#changeData').click(function() {
    $dataDiv.data('key', 'ryu');
    addLog("Set value with .data('key', 'ryu')", $dataDiv.data('key'));
    $dataDiv.attr('key', 'ryu');
    addLog("Set value .attr('key', 'ryu')", $dataDiv.data('key'));

    // bonus points
    addLog("Cannot get with $dataDiv.data('data-key')", $dataDiv.data('data-key'));
    addLog("jQuery 1.6+ Get data-another-key needs $dataDiv.data('anotherKey')", $dataDiv.data('anotherKey'));
    addLog("jQuery < 1.6 Get data-another-key needs $dataDiv.data('another-key')", $dataDiv.data('another-key'));
    return false;
});