JSFiddle - React, Tailwind, and code Playground

by Ace Tributon

HTML

<div class='peastock'></div>

JavaScript

var peas = ['#p1','#p2','#p3','#p4','#p5'],
        poppy=(v,i)=>peas.toString().replace(`,${v[i]}`,'').replace(`${v[i]},`,''),
        $infi=(...para)=>para;
    (
      $.each(peas,i=>///funciton(i){ code inside}
        $infi(
          $('.peastock').append(`<p id="p${[i+1]}">I am ${peas[i]}</p>`),
          $(peas[i]).click(()=>(
            $(peas[i]).css({"color":"red","background-color":"rgba(128,0,0,0.1)"}),
            $(poppy(peas,i)).css({'color':'black','background-color':'rgba(255,255,255,0.2)'}))))),

      $('.peastock').append(`
        <div id="ree">ES6 isnt suitable for all of jQuery's usage!</div>
        <div>Since some functions inside of jQuery's methods dont require 'this' or 'return'</div>
        <div>You can learn this by going <a href="https://www.w3schools.com/Js/js_es6.asp">here</a></div>
      `),
      $("*").css({"margin":"0 auto","padding":"1%"}),
      $("* .peastock, .peastock, .peastock *").css({"background-color":"rgba(128,0,0,0.1)"})
    );