JSFiddle - React, Tailwind, and code Playground

HTML

<div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div>
<div>06</div> <div>07</div> <div>08</div> <div>09</div> <div>10</div>
<div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div>
<div>16</div> <div>17</div> <div>18</div> <div>19</div> <div>20</div>

<p><button>Click Me!</button></p>

CSS

div {
    border:solid 1px #D0D0D0;
    background:#E0E0E0;
    opacity:1;
    margin:5px 10px 0 10px;
}
p {
    text-align:center;
    margin:10px;
}

JavaScript

var divs = document.getElementsByTagNameNS('*', 'div');
var button = document.getElementsByTagNameNS('*', 'button')[0];
var opacity = 1;
var interval = window.setInterval( function() {
    if (opacity > 0) {
        opacity = opacity - 0.01;
        divs[8].style.opacity = opacity;
        divs[11].style.opacity = opacity;
    }
    else {
        window.clearInterval(interval);
        
    }
}, 10);
button.addEventListener("click", function() {
    opacity = 1;
    var interval = window.setInterval( function() {
        if (opacity > 0) {
            opacity = opacity - 0.01;
            
            for (var i = 0; i < 20; i++) {
                if ((i == 8) || (i == 11)) {
                    divs[i].style.opacity = 1 - opacity;
                }
                else {
                    divs[i].style.opacity = opacity;
                }
            }
        }
        else {
            window.clearInterval(interval);
         }
    }, 10);
}, false);