Displaying alert/context messages with jQuery dynamically beyond . show(); and . Hide();?

Question

During the interaction with a given interface, please see here jsfiddle, some warning messages (nothing involving validation...) are presented.

My rather crude approach to display/hide these messages, and certainly also on the counter hand of optimization, was to create a simple function that checks if some checkboxes are marked and depending on the context display these extra messages. However, this approach requires that these messages already exist in the DOM, so I could manipulate them with show();, hide();, toggle(); etc. and it makes me wonder if there is a more effective and clean way to store these messages in a / string variable and then fire them into the target element when needed?

In this example I am trying to display three different contextual messages, a message for each checkbox marked, where in this same condition "marked" a span that is the "container" of the messages is displayed/hidden, and a unique message if 2 checkboxes (In cash and Credit Card) are marked at the same time.

The point is that I am not an expert on JS/jQuery, but I am curious and I am trying to learn in practice, so please do not be frightened by the mess of the code...

HTML

<div class="row">
<div class="col">
    <div class="item padding">
         <h1 class="title">Checkout</h1>

        <p>Pay in Cash or by Credit Card upon delivery</p>
    </div>
    <ul class="list">
        <li class="item item-checkbox">
            <label class="checkbox">
                <input type="checkbox" id="#cash" name="cash">
            </label>In Cash</li>
        <li class="item item-checkbox">
            <label class="checkbox">
                <input type="checkbox" id="#card" name="card">
            </label>Credit Card</li>
        <li class="item item-checkbox">
            <label class="checkbox">
                <input type="checkbox" id="#change" name="change">
            </label>Do you Need Change?</li>
    </ul>
</div>
</div>
<div class="row">
 <div class="col">
  <div class="bar bar-balanced">
  <h1 class="title messages">
   <span class="cash-info">Conditional Info about paying In Cash</span>
   <span class="card-info">Conditional Info about paying with a Credit Card</span>
   <span class="change-info">Conditional Info about the change</span>
   <span class="pay-mix">Conditional Info about Mixed Payments</span>
 </h1>
 </div>
 </div>
</div>

JS

  // vars for conditional messages hide/display <span> with the target classes
var $conditionalCashInfo = $('.cash-info');
var $conditionalCardInfo = $('.card-info');
var $conditionalChangeInfo = $('.change-info');
var $conditionalPayMixInfo = $('.pay-mix');

// var for input checkboxes
var $cashInput = $('input[name="cash"]');
var $cardInput = $('input[name="card"]');
var $changeInput = $('input[name="change"]');

// Start by setting a few things hidden
$conditionalCashInfo.hide();
$conditionalCardInfo.hide();
$conditionalChangeInfo.hide();
$conditionalPayMixInfo.hide();
$('.bar.bar-balanced').hide();

// Any checkbox should trigger the messages box to open
        $('input[name="cash"],input[name="card"],input[name="change"]').on('click', function () { $('.bar.bar-balanced').slideDown("fast");
});

// "In Cash" checkbox actions on click + some conditional logic
$cashInput.on('click', function () {
if ($cardInput.is(':checked') == true) {
    $conditionalCashInfo.hide();
} else {
    if ($(this).is(':checked')) {
        $conditionalCashInfo.fadeIn(300);
    } else {
        $changeInput.attr("checked", false);
        $conditionalChangeInfo.hide();
        $conditionalCashInfo.hide();
        $('.bar.bar-balanced').slideUp("fast");
    }
 }
});

// "Do you need change" checkbox actions on click + some conditional logic
$changeInput.on('click', function () {
if ($(this).is(':checked')) {
    $conditionalChangeInfo.fadeIn(300);
} else {
    $conditionalChangeInfo.hide();
    $('.bar.bar-balanced').slideUp("fast");
}
});

// "Credit Card" checkbox actions on click + some conditional logic
$cardInput.on('click', function () {
 if ($(this).is(':checked')) {
    $changeInput.attr("checked", false);
    $conditionalChangeInfo.hide();
    $conditionalCashInfo.hide();
    $conditionalCardInfo.fadeIn(300);

} else {
    $conditionalCardInfo.hide();
    $('.bar.bar-balanced').slideUp("fast");
    if ($cashInput.is(':checked')) {
        $conditionalCashInfo.fadeIn(300);
    }
 }
});