JSFiddle - React, Tailwind, and code Playground

by tmyie

HTML

<div class="container">
    <ul>
        <li>
            <p>One</p> <span> Child </span>

        </li>
        <li>Two <span> Child </span> 
        </li>
        <li>Three<span> Child </span>
        </li>
    </ul>
</div>

<div class="container">
    <ul>
        <li>
            <p>One</p> <span> Child </span>

        </li>
        <li>Two <span> Child </span> 
        </li>
        <li>Three<span> Child </span>
        </li>
    </ul>
    
    <div class="right"> right </div>
    <div class="left"> left </div>
</div>

CSS

body {
    font-family: sans-serif;
    font-size: 11pt;
}
li {
    background-color: lightgrey;
    margin: 5px 0;
}
span {
    background-color: salmon;
}
p {
    background-color: bisque;
}

JavaScript

// I want the <span> to be 50% opacity

$('.container').each(function(){
$(this).find('li').children('span').fadeTo(300, 0.4);
    });

$('.right').click(function(){

        $()
    
});