JSFiddle - React, Tailwind, and code Playground

by Carlos Medina

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<form accept-charset="UTF-8" action="/markets/btcusd/order_bids" class="new_order_bid" data-remote="true" id="new_order_bid" method="post">
    <div style="margin:0;padding:0;display:inline">
        <input name="utf8" type="hidden" value="✓">
    </div>
    <div class="input-group ord_type">
        <label class="input-group-addon">Order Type</label>
        <select class="form-control" id="order_bid_ord_type" name="order_bid[ord_type]">
            <option value="market">market</option>
            <option selected="selected" value="limit">limit</option>
        </select>
    </div>
    <div id="bid_mo_container">
    
  
    <div class="input-group peg_exchange">
        <label class="input-group-addon">Peg Exchange</label>
        <select class="form-control" id="order_bid_peg_exchange" name="order_bid[peg_exchange]">
            <option value=""></option>
            <option value="Bitstamp">Bitstamp</option>
        </select>
    </div>
    <div class="input-group price_aux">
        <label class="input-group-addon">Float</label><span class="label label-danger hint-price-disadvantage"></span>
        <input class="form-control" id="order_bid_price_aux" name="order_bid[price_aux]" type="text"><span class="input-group-addon">%</span>
    </div>
    </div>
    <div class="input-group price">
        <label class="input-group-addon">Price</label><span class="label label-danger hint-price-disadvantage"></span>
        <input class="form-control" id="order_bid_price" name="order_bid[price]" type="text"><span class="input-group-addon">USD</span>
    </div>
    <div class="input-group amount">
        <label class="input-group-addon">Amount</label>
        <input class="form-control" id="order_bid_origin_volume" name="order_bid[origin_volume]" type="text"><span class="input-group-addon">BTC</span>
    </div>
    <div class="input-group total">
        <label...

JavaScript

$(document).ready(function(){
   $('#order_bid_ord_type').on('change', function() {
      if ($(this).val() === 'market') {
         $('#bid_mo_container').toggle();
      } else if ($(this).val() === 'limit') {
         $('#bid_mo_container').toggle();
      }
   });
 });