JSFiddle - React, Tailwind, and code Playground

by suyash

HTML

<div class="amx-inputDate-picker-incrementIcon amx-inputDate-picker-updateMonth"> UP </div><span class="picker-value" >Jun</span> <div class="amx-inputDate-picker-decrementIcon amx-inputDate-picker-updateMonth" > DOWN ||</div>

<div class="amx-inputDate-picker-incrementIcon amx-inputDate-picker-updateDay"> UP </div></div> <span class="picker-value" >20</span> <div class="amx-inputDate-picker-decrementIcon amx-inputDate-picker-updateDay"> DOWN ||</div>


<div class="amx-inputDate-picker-incrementIcon amx-inputDate-picker-updateYear"> UP </div> <span class="picker-value" >2012</span> <div class="amx-inputDate-picker-decrementIcon amx-inputDate-picker-updateYear"> DOWN </div>

CSS

.amx-inputDate-picker-incrementIcon {
    color: green;
}

.amx-inputDate-picker-decrementIcon {
  color: blue;         
        
}
.picker-value {
    text-transform: uppercase;
    color: black;
    font-weight: bold;
}

div {
    display:inline;
}

JavaScript

var elements = document.getElementsByClassName('amx-inputDate-picker-updateMonth');

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function() {
        this.innerHTML = 'New Text';
    }, false);
}