JSFiddle - React, Tailwind, and code Playground

by Danny_Joris

HTML

<div class="container">
    <div class="column first">
        <button class="alert">Alert!</button>
    </div>
    <div class="column last"></div>
</div>
<button class="switch">Switch!</button>

CSS

.container {
  }
  .column {
      float: left;
      width: 200px;
      height: 30px;
      display: block;
      border: 1px solid hotpink;
      text-align: center;
  }
  button.alert {
  }
  button.switch {
      float: left;
      margin-top: 10px;
      clear: left;
  }

JavaScript

$(function () {

    $('.alert').on('click', function () {
        alert('Clicked!');
    });

    $('.switch').on('click', function () {
        var $alert = $('.alert');
        if ($alert.parent().hasClass('first')) {
            $alert.appendTo('.column.last');
        } else {
            $alert.appendTo('.column.first');
        }

    });

});