JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<div class="RE-Create-Rule">
  <div class="RE-popup-label">1) Rule Name</div>
  <input id="RE-rule-name"></input>     
  <div class="RE-popup-label">2) Event that triggers this rule:</div>
    <select id="RE-trigger" class="RE-trigger">
      <option value="0">Select...</option>
      <option value="1">Idea Submitted</option>
      <option value="2">Idea Updated</option>
      <option value="3">Comment Submitted</option>
      <option value="4">Vote Submitted</option>
      <option value="5">Idea Status Changed</option>
    </select>
  <div class="RE-popup-label">3) Meet the Following Conditions</div>
  <div class="RE-condition-wrapper">
    <div id="RE-condition-1" class="condition">
      <select id="RE-attribute-1" class="RE-attribute">
        <option value="0">Select...</option>
        <option value="1">Vote Count</option>
        <option value="2">Demote Count</option>
        <option value="3">View Count</option>
        <option value="4">Vote/View Ratio</option>
        <option value="5">Comment Count</option>
        <option value="6">Submitted by</option>
        <option value="7">Category</option>
        <option value="8">Status</option>
      </select>
      <select id="RE-operator-1" class="RE-operator">
        <option value="0">Select...</option>
        <option value="1">Is</option>
        <option value="2">Is Not</option>
        <option value="3">Is Less Than</option>
        <option value="4">Is Greater Than</option>
        <option value="5">Between</option>
      </select>
      <div id="RE-input-1" class="RE-form-input" style="display: none;">
        <input id="RE-number-1" class="RE-basic-input"></input>
      </div>
      <span class="RE-between" style="display:none;">
        <input id="RE-between-a"></input>
        <span id="RE-between-label">and</span>
        <input id="RE-between-b"></input>
      </span>
      <div id="remove-condition-1" class="remove-condition">X</div>
    </div>
  </div>
  <div class="add-condition">Add...

CSS

input {
 height: 22px;
 font-size:16px;
}

select {
 height: 24px;
 font-size:16px;
}
.add-action {
  padding-top: 2px;
  padding-bottom: 2px;
}
.add-condition {
  padding-top: 2px;
  padding-bottom: 2px;
}
.remove-action {
  padding-top: 2px;
  padding-bottom: 2px;
}
.remove-condition {
  float:right;
}
.remove-action {
  float:right;
}
.condition {
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #969696;
}
.action {
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #969696;
}

.RE-popup-label{
  padding-top:10px;
  margin-bottom: 5px
}
.RE-popup-label{
  font-weight: bold;
}
#RE-rule-name {
  width: 650px;
}
.RE-popup {
  margin-left:10px;
}

JavaScript

$('.RE-form-input').css('display','inline-block');
$('.RE-condition-wrapper').first().css('padding-top','0');
$('.RE-action-wrapper').first().css('padding-top','0');
$('.add-condition').click(function() {
  addOne('condition');
});

$('.add-action').click(function() {
  addOne('action');
});

$('.remove-condition').click(function() {
    if ($('.condition').length == 1){
      resetMe($(this));
    } else {
      $(this).parents(".condition").remove();
    }
  });

$('.remove-action').click(function() {
  if ($('.action').length == 1){
    resetMe($(this));
  } else {
    $(this).parents('.action').remove();
  }
});

  $('.RE-operator').change(function() {
    switch (this.value) {
    //case '0':
    //  break;
    //IS
    //case '1':
    //  $(this).siblings(".RE-form-input").css('display','inline-block');
    //  $(this).siblings(".RE-between").css('display','none');
    //  break;
    //IS NOT
    //case '2':
    //  $(this).siblings(".RE-form-input").css('display','inline-block');
    //  $(this).siblings(".RE-between").css('display','none');
    //  break;
    //LESS THAN
    //case '3':
    //  $(this).siblings(".RE-form-input").css('display','inline-block');
    //  $(this).siblings(".RE-between").css('display','none');
    //  break;
    //GREATER THAN
    //case '4':
    //  $(this).siblings(".RE-form-input").css('display','inline-block');
    //  $(this).siblings(".RE-between").css('display','none');
    //  break;
    //BETWEEN
      case '5':
        $(this).siblings('.RE-form-input').css('display','none');
        $(this).siblings(".RE-between").css('display','inline-block');
        break;
    }
  });

$('.RE-attribute').change(function() {
  switch (this.value) {
    case '0':
      break;
    case '1':
      $(this).parents('.RE-form-input').css('display', 'inline');
      break;
    case '2':
      $(this).parents('.RE-form-input').css('display', 'inline');
      break;
    case '3':
      $(this).parents('.RE-form-input').css('display',...