JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-add-enquiry">
  <div id="formula-one">
    <p class="title-full">Formula <span class="red">*</span></p>
    <textarea id="textarea-term-price-1" class="form-control" maxlength="100" name="formula" placeholder="Formula *" rows="3" data-fv-field="formula"></textarea>
    <div class="row characters">
      <div class="col-md-9 col-sm-9 col-xs-7 characters-left">
        <p>Example: Singapore Platts BunkerWire 380cst related on Date of Nomination</p>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-5 characters-right">
        <p id="textarea-price-mode-1">500 Characters Max</p>
      </div>
    </div>
  </div>
  <div class="wrapper-formula">
    <div id="formula-two">
      <p class="title-full">Formula <span class="red">*</span></p>
      <textarea id="textarea-term-price-2" class="form-control" maxlength="100" name="formula" placeholder="Formula *" rows="3" data-fv-field="formula"></textarea>
      <div class="row characters">
        <div class="col-md-9 col-sm-9 col-xs-7 characters-left">
          <p>Example: Singapore Platts BunkerWire 380cst related on Date of Nomination</p>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-5 characters-right">
          <p id="textarea-price-mode-2">500 Characters Max</p>
        </div>
      </div>
    </div>
    <div id="formula-three">
      <p class="title-full">Formula <span class="red">*</span></p>
      <textarea id="textarea-term-price-3" class="form-control" maxlength="100" name="formula" placeholder="Formula *" rows="3" data-fv-field="formula"></textarea>
      <div class="row characters">
        <div class="col-md-9 col-sm-9 col-xs-7 characters-left">
          <p>Example: Singapore Platts BunkerWire 380cst related on Date of Nomination</p>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-5 characters-right">
          <p id="textarea-price-mode-3">500 Characters Max</p>
        </div>
      </div>
    </div>
  </div>
  <p class="bw-float-right"><a id="add" href="#"...

CSS

#formula-two,
#formula-three,
#formula-floating-two,
#formula-floating-three,
.fuel-details {
  display: none;
}

.form-add-enquiry {
  width: 590px;
}

.form-add-enquiry a {
  color: #333;
}

.form-add-enquiry a:hover {
  color: #23527c;
}

.form-add-enquiry .left {
  float: left;
  width: 280px;
}

.form-add-enquiry .right {
  float: right;
  width: 280px;
}

.form-add-enquiry .left .title,
.form-add-enquiry .right .title,
.title-full {
  color: #999999;
  font-size: 11px;
  font-weight: normal;
  margin-bottom: 2px;
}

.form-add-enquiry-one-line {
  list-style: none;
  width: 100%;
}

.contact-input {
  width: 200px;
}

.characters {
  font-size: 11px;
}

.characters-right {
  text-align: right;
}

a.plus-icon {
  color: #0e193f;
}

.term-enquiry-ul {
  margin: 0;
  padding: 0;
}

.term-enquiry-ul li {
  float: left;
  list-style: none;
  padding-left: 10px;
}

.enquiry-number {
  border: 1px solid #a4afd6;
  background: #e7e8e3;
  padding: 7px 10px;
  float: right;
  color: #5a5a5a;
  font-size: 12px;
}

.enquiry-number .number {
  color: #999;
  font-size: 10px;
}

input.mfm {
  width: auto;
  vertical-align: middle;
  margin-top: -2px;
}

.label-mfm {
  color: #333;
  font-size: 12px;
}

JavaScript

$("#add").on("click", function(event) {
  event.preventDefault();
  var div = $(".wrapper-formula > div").filter(":hidden");
  var hid = div.size();
  div.first().fadeIn();
  //hid == 1 ? $(this).fadeOut() : null;
});
//$('#remove').remove();
$("#remove").on("click", function(event) {
  event.preventDefault();
  var div = $(".wrapper-formula > div").filter(":visible");
  div.last().fadeOut();
});