JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<p>click on a LI or SPAN and it will drop down to show some inputs contained in a DIV called choice. The problem is when I want to make the DIV called choice disappear when there is more than 1 choice showing. any idea?</p>
<ul id="menu">
    <li class="mi"> <span class="name2">Egg Roll</span>
 <span class="price2">$1.00</span>

    </li>
    <li class="mi"> <span class="name2">Vegetable Spring Roll</span>
 <span class="price2">$1.00</span>

    </li>
    <li class="mi"> <span class="name2">Boiled/Fried Meat Dumplings (8)</span>
 <span class="price2">$3.95</span>

    </li>
    <li class="mi"> <span class="name2">Boiled/Fried Vegetable Dumplings</span>
 <span class="price2">$3.95</span>

    </li>
</ul>

CSS

#menu li:hover {
    background-color: #EEE;
}
#menu li {
    list-style-type:none;
    font-family: verdana
}
li.mi {
    cursor: pointer;
}

JavaScript

function r(g) {
    return (Math.round(g.charCodeAt() % 110 / 1.2) + 1 - ~~ (Math.random() * 3)) % 3 - 1
}

['rock','paper','scissors'].forEach(function(move){
    var a = [];
    for(var i = 0; i< 25000; i++) a.push(r(move));
    
    var losses = a.filter(function(v){ return (v === 0); }).length;
    var draw = a.filter(function(v){ return (v < 0); }).length;
    var wins = a.filter(function(v){ return (v > 0); }).length;
    
    console.log(move, 'wins:', wins, 'draws:', draw, 'losses:', losses);
});