JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myid" data-test="abc123"></div>
<button id="get_data">GET via `.data()`</button>
<button id="set_data">SET via `.data()`</button>
<button id="get_attr">GET via `.attr()`</button>
<button id="set_attr">SET via `.attr()`</button>

JavaScript

var my = $('#myid');
$('#get_data').on('click', function() {
     console.log('get .data');
     console.log(my.data('test'));
});
$('#set_data').on('click', function() {
    my.data('test', 'set via .data'); 
    console.log('set .data');
});
$('#get_attr').on('click', function() {
    console.log('get .attr');
    console.log(my.attr('data-test')); 
});
$('#set_attr').on('click', function() {
   my.attr('data-test', 'set via .attr');
   console.log('set .attr()'); 
});