JSFiddle - React, Tailwind, and code Playground

by Vince

HTML

<h3 id="arrays"></h3>


<h5 id="objectTest"></h5>

<table border="0" cellspacing="0" cellpadding="0">
    <tr data-offer-key="MDLAzaleaB" data-offer-id="3010">
        <td class="cell-1">
            <p>Azalea Bracelet</p>
        </td>
        <td></td>
    </tr>
    <tr data-offer-key="MDLAzaleaB" data-offer-id="3010">
        <td class="cell-1">
            <p>Alyssa Bracelet Size Small</p>
        </td>
        <td></td>
    </tr>
    <tr data-offer-key="MDLOrchideaB8" data-offer-id="3021">
        <td class="cell-1">
            <p>Orchidea Bracelet Size Small</p>
        </td>
        <td></td>
    </tr>
    <tr data-offer-key="MDLPrimulaRS6" data-offer-id="3021">
        <td class="cell-1">
            <p>Primula RS Ring Size 6</p>
        </td>
        <td></td>
    </tr>
    <tr>
        <td id="debug" colspan="2"></td>
    </tr>
</table>

CSS

table {
    border:1px solid red;
}
tr:nth-child(even) td {
    background-color:rgba(0, 0, 0, 0.1);
}
* {
    font-family:Helvetica, Arial, sans-serif;
}
#debug {
    color:green;
}

JavaScript

// Index of Names
var offerIds = [
    3010,
    'https://mojo.blob.core.windows.net/f08a950b54294d25afdc374f7a11fc24/i/rings-thumb-03-01.png',
    3011,
    'https://mojo.blob.core.windows.net/f08a950b54294d25afdc374f7a11fc24/i/rings-thumb-03-01.png',
    3012,
    'https://mojo.blob.core.windows.net/f08a950b54294d25afdc374f7a11fc24/i/rings-thumb-03-01.png',
    3013,
    'https://mojo.blob.core.windows.net/f08a950b54294d25afdc374f7a11fc24/i/rings-thumb-03-01.png',
    3014,
    'https://mojo.blob.core.windows.net/f08a950b54294d25afdc374f7a11fc24/i/rings-thumb-01-01.png',
    3015,
    'https://mojo.blob.core.windows.net/f08a950b54294d25afdc374f7a11fc24/i/rings-thumb-01-01.png',
    3016,
    'https://mojo.blob.core.windows.net/f08a950b54294d25afdc374f7a11fc24/i/rings-thumb-01-01.png',
    3017,
    'https://mojo.blob.core.windows.net/f08a950b54294d25afdc374f7a11fc24/i/rings-thumb-01-01.png'
    
];
var idNames = [
/************ RINGS */
// Orchidea
'MDLOrchideaB',
// Alyssa RS
'MDLAlyssa',
// Primula RS
'MDLPrimulaRS',
// Primula RL
'MDLPrimulaRL',
// Azalea R
'MDLAzalea',
// Gardenia RY
'MDLGardeniaRY',
// Gardenia RW
'MDLGardeniaRW',
// Gardenia RP
'MDLGardeniaRP',

/************ BRACELETS */
// Orchidea B
'MDLOrchideaB',
// Alyssa B
'MDLAlyssaB',
// Primula B
'MDLPrimulaB',
// Azalea B
'MDLAzaleaB'];

var thumbs = [
/************ Rings */
// Orchidea R
'https://mojo.blob.core.windows.net/f08a950b54294d25afdc374f7a11fc24/i/rings-thumb-03-01.png',
// Alyssa RS
'https://mojo.blob.core.windows.net/f08a950b54294d25afdc374f7a11fc24/i/rings-thumb-01-01.png',
// Primula RS
'https://mojo.blob.core.windows.net/f08a950b54294d25afdc374f7a11fc24/i/rings-thumb-08-01.png',
// Primula RL
'https://mojo.blob.core.windows.net/f08a950b54294d25afdc374f7a11fc24/i/rings-thumb-06-01.png',
// Azalea R
'https://mojo.blob.core.windows.net/f08a950b54294d25afdc374f7a11fc24/i/rings-thumb-02-01.png',
// Gardenia...