JSFiddle - React, Tailwind, and code Playground

by BDG

HTML

<!-- <button>swap</button> -->
<br/>

<table>
<tbody>
  <tr class="header"><td colspan="4"><strong>Delivery</strong></td></tr>
  <tr>
    <th>Session Date: </th>
    <td>
    <span class=togglerDateTime data-toggle='["2012-05-24 18:30 Local","2012-05-25 08:30 Australia/Sydney"]'>2012-05-24 18:30 Local</span>    
    </td>
  </tr>
  <tr>
    <th>Access Start: </th>
    <td>
      <span class=togglerDateTime data-toggle='["2012-05-21 15:00 Local","2012-05-22 05:00 Australia/Sydney"]'>2012-05-21 15:00 Local</span>  
    </td>
  </tr>
  <tr>
    <th>Access End:</th>
    <td>
      <span class=togglerDateTime data-toggle='["2012-05-24 20:30 Local","2012-05-25 10:30 Australia/Sydney"]'>2012-05-24 20:30 Local</span>      
        <strong></strong><br></td>
  </tr>
  <tr>
    <th>Interviews Only Until: </th>
    <td>
      <span class=togglerDateTime data-toggle='["",""]'></span>  
      </td>
  </tr>
    
  </tbody>
</table>

<hr/>


<br/>
<span class=togglerDateTime data-toggle='["foo2","bar2"]'>foo2</span><br/>
<span class=togglerDateTime data-toggle='["foo3","bar3"]'>foo3</span><br/>
<span class=togglerDateTime data-toggle='["foo4","bar4"]'>foo4</span><br/>
<span class=togglerDateTime data-toggle='["foo5","bar5"]'>foo5</span><br/>
<span class=togglerDateTime data-toggle='["foo1","bar1","baz1","zar1","tee1","que1"]'>foo1</span><br/>

CSS

th{
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
background-attachment: scroll;
background-clip: border-box;
background-color: #E7E7E7;
background-image: none;
background-origin: padding-box;
border-bottom-color: #D1D2D4;
border-bottom-style: solid;
border-bottom-width: 1px;
border-collapse: collapse;
border-left-color: #D1D2D4;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #D1D2D4;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #D1D2D4;
border-top-style: solid;
border-top-width: 1px;
color: black;
display: table-cell;
font-family: 'trebuchet MS', 'lucida sans unicode', 'arial unicode ms', helvetica, arial, sans-serif;
font-size: 12px;
font-weight: normal;
height: 14px;
letter-spacing: normal;
line-height: 14px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
padding-top: 7px;
text-align: left;
text-transform: uppercase;
vertical-align: top;
width: 365px;
}

td{
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
border-bottom-color: #D1D2D4;
border-bottom-style: solid;
border-bottom-width: 1px;
border-collapse: collapse;
border-left-color: #D1D2D4;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #D1D2D4;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #D1D2D4;
border-top-style: solid;
border-top-width: 1px;
color: black;
display: table-cell;
font-family: 'trebuchet MS', 'lucida sans unicode', 'arial unicode ms', helvetica, arial, sans-serif;
font-size: 12px;
height: 28px;
letter-spacing: normal;
line-height: 14px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
padding-top: 4px;
text-align:...

JavaScript

(function(){
  var state=0;
  $("td span").click(function(){
    state+=1;
    $(".togglerDateTime").each(function(){
      var self    = $(this);
      var options = self.data('toggle');
      var option  = (state)%options.length;
      console.log(option)
      self.text(options[option]);
    })
  })
}());