JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>

<style>

p:nth-child(2n+1){
 	color: green;
    background-color: red;
}

p:nth-child(2n){
color: yellow;
background-color:blue;
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>

<script>

      $('p:nth-child(2n+1)').click(function(){
     $(this).css('background-color','black').css('color','white');
     $('p:nth-child(2n+1)').click(function(){
        $(this).css('background-color','red').css('color','green');
    });    
  });

    $('p:nth-child(2n)').click(function(){
    $(this).css('background-color','black').css('color','white');
     $('p:nth-child(2n)').click(function(){
        $(this).css('background-color','blue').css('color','yellow');
    });
   
  });


</script>


</body>
</html>