JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p id="para" data-word="4" data-size="15"  data-end-word="paragraph">
This is sample paragraph.
</p>


<div id="careful-div" data-somethingelse="working example" data-Not-Working="hi">This is another sample</div>

<p>
It is safe to be all letters in lower case of data-attribute. Otherwise it may not work.
</p>

CSS

p[data-word='4'] {
  background-color: blue;
}
p[data-size='5'] {
  color: red;
}

JavaScript

var paragraph = document.getElementById('para');
 
alert(paragraph.dataset.size );// "15"
alert (paragraph.dataset.word); // "4"

$(document).ready(function(){
		alert('using jQuery: '+$('#para').data('word'));
    alert('using jQuery: '+$('#para').attr('data-end-word'));
    
    alert("it is : "+$('#careful-div').data('somethingelse'));
    alert("it may not work: "+ $('#careful-div').data('Not-Working'));
    alert("But it will work : "+$('#careful-div').attr('data-Not-Working'));
})