JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test" data-foo='{"foo": "bar", "bar": "baz"}'>Needs to be valid JSON!</div>

JavaScript

/*
    jQuery 1.4.2 vs 1.4.3 -- data method reads from the attribute
    * Listens to changes made by native attr method

    Default is set to 1.4.3, select 1.4.2 and click run
*/

var div = $('#test');

/*
    1.4.3 = Object
    1.4.2 = null
*/
console.log (div.data ('foo'));

/*
    Change the value using .attr
*/
div[0].setAttribute ('data-foo', 'something else')
    
/*
    1.4.3 = something else
    1.4.2 = null
*/
console.log (div.data ('foo'));