JSFiddle - React, Tailwind, and code Playground

by Ruudolfs

HTML

<tr class="cart-wcdpp-fields order-total">
   <th>Payment Options</th>
   <td>
      <p class="form-row form-row-wide" id="wcdpp_checkout_deposit_field" data-priority="">
         <span class="woocommerce-input-wrapper">
         <input type="radio" class="input-radio wcdpp_checkout_radio" value="deposit" name="wcdpp_checkout_deposit"  id="wcdpp_checkout_deposit_deposit" />
         <label for="wcdpp_checkout_deposit_deposit" class="radio ">Pay Deposit (15%)</label>
         <input type="radio" class="input-radio wcdpp_checkout_radio" value="full" name="wcdpp_checkout_deposit"  id="wcdpp_checkout_deposit_full" checked='checked' />
         <label for="wcdpp_checkout_deposit_full" class="radio ">Pay In Full</label>
         </span>
      </p>
   </td>
</tr>



<div>
   <p class="form-row form-row-wide thwcfe-input-field-wrapper" id="forwarding_field" data-priority="30" data-rules="" data-rules-action="" data-validations="">
      <span class="woocommerce-input-wrapper">
      <label class="checkbox forwarding" >
      <input type="checkbox" class="input-checkbox forwarding thwcfe-input-field thwcfe-price-field" name="forwarding" id="forwarding" value="1"  data-price="15" data-price-type="percentage" data-price-label="Freight forwarding" data-price-unit="0" data-taxable="no" data-tax-class="" /> Freight forwarding&nbsp;<span class="optional">(optional)
      </span>
      </label>
      </span>
   </p>
</div>

JavaScript

$(".cart-wcdpp-fields.order-total").hide();
$(".input-checkbox.thwcfe-input-field").click(function() {
    if($(this).is(":checked")) {
        $(".cart-wcdpp-fields.order-total").show(300);
    } else {
        $(".cart-wcdpp-fields.order-total").hide(200);
    }
});