JSFiddle - React, Tailwind, and code Playground

by Oscar Jara

HTML

<ul id="wordlist">
        <li data-audio="test-audio" data-pic="images/one.png" data-word="one" data-number-input="1" data-completion-number="1" data-grid="4,2"></li>
        <li data-audio="test-audio" data-pic="images/two.png" data-word="two" data-number-input="2" data-completion-number="2" data-grid="5,3"></li>
        <li data-audio="test-audio" data-pic="images/three.png" data-word="three" data-number-input="3" data-completion-number="3" data-grid=""></li>
        <li data-audio="test-audio" data-pic="images/four.png" data-word="four" data-number-input="4" data-completion-number="4" data-grid=""></li>
        <li data-audio="test-audio" data-pic="images/five.png" data-word="five" data-number-input="5" data-completion-number="5" data-grid="6,4"></li>
        <li data-audio="test-audio" data-pic="images/six.png" data-word="six" data-number-input="6" data-completion-number="6" data-grid="7,5"></li>
        <li data-audio="test-audio" data-pic="images/seven.png" data-word="seven" data-number-input="7" data-completion-number="7" data-grid="8,6"></li>
        <li data-audio="test-audio" data-pic="images/eight.png" data-word="eight" data-number-input="8" data-completion-number="8" data-grid="9,7"></li>
</ul>

JavaScript

var data = $('ul#wordlist li').map(function(i, v) {

    var numberInput = $(this).data('number-input');
    var completionNumber = $(this).data('completion-number');
    var gridX = $(this).data('grid').split(',')[0];
    var gridY = $(this).data('grid').split(',')[1];

    return {
        numberInput: numberInput,
        completionNumber: completionNumber,
        grid: {
            x: gridX,
            y: gridY
        }
    };
}).get();

console.log(data);