JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="elements">
<li id="mtq" data-id="1" data-name="abc">test 1</li>
<li data-id="2">test 2</li>
<li data-id="3" data-name="xyz">test 3</li>
<li data-id="4" data-name="pqr">test 4</li>
<li data-id="5" data-type="text">test 5</li>
<li data-id="7">test 6</li>
</ul>
<a href="#" id="hello">hello</a>

JavaScript

function getDataAttributes(el) {
    var data = {};
    [].forEach.call(el.attributes, function(attr) {
        if (/^data-/.test(attr.name)) {
            var camelCaseName = attr.name.substr(5).replace(/-(.)/g, function ($0, $1) {
                return $1.toUpperCase();
            });
            data[camelCaseName] = attr.value;
        }
    });
    return data;
}

$("#hello").click( function (e) {

	$("ul#elements li").each(function() {
    var data = getDataAttributes($(this));
    console.log(data);
    //var json = JSON.stringify(data, null, 2);
    //el.appendChild(document.createTextNode(json));
	});
    
});