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
};

//Change all 'li' inside 'ul' with data from above.
$('ul#wordlist li').map(function(i, v) {
    $(this).data('number-input', numberInput.toString());
    $(this).data('completion-number', completionNumber.toString());
    $(this).data('grid', smallGrid.x + ',' + smallGrid.y);

    //Print new 'data' attributes in console to look they have changed.
    console.log("li#" + i + ": number-input" + $(this).data('number-input') + " completion-number:" + $(this).data('completion-number') + " grid:" + $(this).data('grid'));
});