JSFiddle - React, Tailwind, and code Playground

by Maksim Kalenich

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css&quot; integrity=&quot;sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"></script>
<div class="card-block">
  <div class="row">
    <div class="col-md-4">
      <div class="card transfers-create-item">
        <h3 class="card-header align-items-center">B2BinPayGateway1 <img src="http://lorempixel.com/85/30" alt="" class="float-xs-right"></h3>
        <div class="card-block">
          <div class="form-group field-paymentfields-card required">
            <label class="control-label" for="paymentfields-card">card</label>
            <input id="paymentfields-card" class="form-control" name="PaymentFields[card]" aria-required="true" type="text">
            <p class="text-danger"></p>
          </div>
          <div class="form-group field-paymentfields-card_code required">
            <label class="control-label" for="paymentfields-card_code">CVC2, CVV2 or CID</label>
            <input id="paymentfields-card_code" class="form-control" name="PaymentFields[card_code]" aria-required="true" type="text">
            <p class="text-danger"></p>
          </div>
          <div class="form-group field-paymentfields-card_expire_m required">
            <label class="control-label" for="paymentfields-card_expire_m">Expiration month</label>
            <input id="paymentfields-card_expire_m" class="form-control" name="PaymentFields[card_expire_m]" aria-required="true" type="text">
            <p class="text-danger"></p>
          </div>
          <div class="form-group field-paymentfields-card_expire_y required">
            <label class="control-label" for="paymentfields-card_expire_y">Expiration year</label>
            <input id="paymentfields-card_expire_y" class="form-control" name="PaymentFields[card_expire_y]" aria-required="true" type="text">
            <p class="text-danger"></p>
          </div>
          <div class="form-group...

CSS

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ');

JavaScript

(function(window, $) {
  "use strict";

  var defaults = {
    sources: [],
    destination: ''
  };

  function chooser(options) {
    options = $.extend(defaults, options);

    var $self = $(this),
      $controls = $('input', this),
      $destination = $(options.destination),
      fillPlaceholder = $destination.prop('tagName') === 'INPUT' ? $.fn.val : $.fn.text,
      $sources = options.sources.map(function(el, i) {
        var $element = $(el[0]),
          path = $element.prop('tagName') === 'SELECT' ? ['option:selected', el[0]] : [el[0]],
          attribute = el[1];

        $element.on('change', function(e) {
          var idx = $controls.index($controls.filter(':checked'));
          if (idx === i) {
            fillPlaceholder.call($destination, $sources[i]());
          }
        });

        return function() {
          return ($.apply(null, path)).attr(attribute);
        };
      });

    $.each($controls, function(i, c) {
      $(c).on('change', function(e) {
        fillPlaceholder.call($destination, $sources[i]());
      });
    });
  }

  $.fn.chooser = chooser;
})(window, window.jQuery);

$('#payments-type').chooser({
  sources: [
    ["#payments-account_id", "data-meta-currency"],
    ["#payments-currency_code", "data-meta-currency"]
  ],
  destination: ".field-payment-amount .input-group-addon"
});