JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<div class="RE-popup">
<div class="RE-popup-label">1) Rule Name</div>

  <input id="RE-rule-name"></input>

  <div class="RE-popup-label">2) Meet the Following Conditions</div>

  <div class="RE-condition-wrapper">
    <div id="RE-condition-1" class="condition">
      <select id="RE-trigger-1" class="RE-trigger">
          <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 Greater Then</option>
          <option value="3">At Least</option>
          <option value="4">Less Than</option>
          <option value="5">Between</option>
          <option value="6" style="display: none;">Period of Time</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 Condition</div>

  <div class="RE-popup-label">3) Perform the Following Actions</div>

  <div class="RE-action-wrapper">
    <div id="RE-action-1" class="action">
      <select id="RE-select-action-1" class="RE-form-select">
            <option value="0">Select...</option>
            <option value="1">Email</option>
  ...

CSS

.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-form-input:input { 
height:24px;
}
.RE-trigger {
    height:24px;
    font-size: 16px;
}
.RE-operator {
    height:24px;
    font-size: 16px;
}
.RE-form-select {
    height:24px;
    font-size: 16px;
}
.RE-popup-label{
    padding-top:10px;
}
.RE-popup-label{
font-weight: bold;
}

#RE-rule-name {
    width: 650px;
    margin-top:5px;
    margin-bottom: 10px;
    height:24px;
    font-size:20px;
}
.RE-popup{margin-left:10px;}

JavaScript

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

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

$('.remove-condition').click(function() {
$(this).parents(".condition").remove();
});

$('.remove-action').click(function() {
$(this).parents(".action").remove();
});

$('.RE-operator').change(function() {
    switch (this.value) {
        case '0': 
            break;
        case '1':
            $(this).('.condition .RE-form-input').toggle();
            break;
        case '2':
            $(this).child('.RE-form-input').toggle();
            break;
        case '3':
           $(this).parents('.RE-form-input').toggle();
            break;
        case '4':
            $(this).parents('.RE-form-input').css('display', 'inline');
            break;
        case '5':
            $(this).parents('.RE-between').css('display', 'inline');
            $(this).parents('.RE-basic-input').css('display', 'none');
            break;
        case '6':
            $(this).parents('.RE-form-input').css('display', 'inline');
            break;
        } 
    });

$('.RE-trigger').change(function() {
        console.log(this);
    switch (this.value) {
        case '0':
            $(this).parents('.RE-form-input').css('display', 'inline');
            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', 'inline');
            break;
        case '4':
            $(this).parents('.RE-form-input').css('display', 'inline');
            break;
        case '5':
            $(this).parents('.RE-form-input').css('display', 'inline');
            break;
        case '6':
            $(this).parents('.RE-form-input').css('display', 'inline');
            break;
        }
    
       
    });

function add(type)
{      
  ...