JSFiddle - React, Tailwind, and code Playground

by Christopher McCulloh

HTML

<div id="first">This is my first div content</div>
<div id="second">This is my second div content</div>
        <div id="third">This is my third div content</div>

<button type="button" id="kickoffDemo">Demo</button>

JavaScript

var demo = [
    {selector: "#first", msg: "Let's talk about this!", original:'', to:{'border':'1px solid red'}},
    {selector:"#second, #third", msg:"This too!!!", original:'', to:{'border':'1px solid red'}}
];

     var demoSpot = 0;
var lastSpot = 0;
     
$('#kickoffDemo').live('click', function(e){
    demoSpot = demoSpot || 0;

     $(demo[lastSpot].selector).css({'border':demo[lastSpot].original});
lastSpot = demoSpot
     demo[demoSpot].original = $(demo[demoSpot].selector).css('border');
    $(demo[demoSpot].selector).css(demo[demoSpot].to);    
 
demoSpot++; 
     if(demoSpot > demo.length -1){demoSpot = 0}    
console.log(demoSpot, demo.length-1);     
});