JSFiddle - React, Tailwind, and code Playground

by Oscar Jara

HTML

<ul id="wordlist">
        <li data-audio="" data-pic="images/one.png" data-word="one" data-number-input="" data-completion-number="" data-grid=""></li>
        <li data-audio="" data-pic="images/two.png" data-word="two" data-number-input="" data-completion-number="" data-grid=""></li>
        <li data-audio="" data-pic="images/three.png" data-word="three" data-number-input="" data-completion-number="" data-grid=""></li>
        <li data-audio="" data-pic="images/four.png" data-word="four" data-number-input="" data-completion-number="" data-grid=""></li>
        <li data-audio="" data-pic="images/five.png" data-word="five" data-number-input="" data-completion-number="" data-grid=""></li>
        <li data-audio="" data-pic="images/six.png" data-word="six" data-number-input="" data-completion-number="" data-grid=""></li>
        <li data-audio="" data-pic="images/seven.png" data-word="seven" data-number-input="" data-completion-number="" data-grid=""></li>
        <li data-audio="" data-pic="images/eight.png" data-word="eight" data-number-input="" data-completion-number="" data-grid=""></li>
</ul>

JavaScript

var numberInput = 2;
var completionNumber = 2;
var smallGrid = {
    x: 4,
    y: 4
};
var largeGrid = {
    x: 8,
    y: 6
};

//In this case, this is just affecting the first 'li' inside 'ul' that's why '.eq(0)' is used.
elem = $('ul#wordlist li').eq(0);
elem.data('number-input', numberInput.toString());
elem.data('completion-number', completionNumber.toString());
elem.data('grid', smallGrid.x + ',' + smallGrid.y);

//Print new 'data' attributes in console to look they have changed.
console.log(elem.data('number-input'));
console.log(elem.data('completion-number'));
console.log(elem.data('grid'));