Displaying alert / context messages with jQuery dynamically in addition to .show (); and .hide () ;?

While interacting with a particular interface, please see jsfiddle , some warning messages (nothing involving validation ..) .) are displayed.

My rather rustic approach to displaying / hiding these messages, and certainly also counteracting optimization, was to create a simple function that checks if some checkboxes are checked and depending on the context they 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 this makes me wonder if there is a more effective and clean way of storing these messages in a variable / string and then firing them at the target element when I need it?

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

The issue is that I am not an expert in JS / jQuery, but I am curious and I am trying to learn in practice, so please do not get scared by the code mess ...

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);
    }
 }
});