JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<div id="quiz">
    <input id="display" type="text" />
</div>
<div id="tracks">
    <table>
        <tr>
            <th>Artist</th>
            <th>Titel</th>
        </tr>        
    </table>
</div>

CSS

#tracks { background-color: #999; padding: 10px; width: 600px; }
#tracks .track{ margin: 5px auto; padding: 5px; width: 500px; height: 35px; background: #444; color: #eee; border: 1px solid black;}

JavaScript

$(function(){
    var tracks = [
        { 
            id: 0+randomString(), 
            title: ['BURN IT DOWN', 'burn it down', 'Burn It Down'] ,
            artist: ['Linkin Park', 'linkin park'], 
            genre: 'Rock' 
        },
        { 
            id: 1+randomString(), 
            title: 'Dreamscape', 
            artist: '009 Sound System', 
            genre: 'Electro' 
        },
        { 
            id: 2+randomString(), 
            title: 'Fire', 
            artist: 'Magnatic Man', 
            genre: 'Dubstep'  
        },
        { 
            id: 3+randomString(), 
            title: 'Cloudburn', 
            artist: 'Feed Me', 
            genre: 'Dubstep'  
        },
        { 
            id: 4+randomString(), 
            title: 'Crush On You', 
            artist: 'Nero', 
            genre: 'Dubstep'  
        },
        { 
            id: 5+randomString(), 
            title: ['One Click Headshot', '1 Click Headshot'], 
            artist: 'Feed Me', 
            genre: 'Dubstep'  
        }        
    ];
    console.log(tracks);
    $.each(tracks, function(i, v) {
        $('<tr/>', {
            'id': v.id,
            'class': 'track'
        }).html('<td>'+v.artist+'</td><td>'+v.artist+'</td>')
        .appendTo('#tracks table');
    });
    $('#display').keyup(function (){
        var str = $('#display').val().toLowerCase(); 
        $.each(tracks, function(i, v) {
            if($.isArray(v.title)) {
                $.each(v.title, function(i, e) {
                    if(e.toLowerCase() == str) {
                        showTrack(v);
                        return;
                    }
                });
            } else {
                if(v.title.toLowerCase() == str) {
                    showTrack(v);
                    return;
                }
            }
        });       
        
    })
    
})
function showTrack(v) { 
    var artist = $.isArray(v.artist) ? v.artist[0] : v.artist,
        title =...