jQuery display messages

by Adriano Monecchi

HTML

<link rel="stylesheet" href="https://code.ionicframework.com/1.0.0-rc.1/css/ionic.min.css">
<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" class="paymethods incash" data-pay="In Cash">
                </label>In Cash</li>
            <li class="item item-checkbox">
                <label class="checkbox">
                    <input type="checkbox" id="#card" name="card" class="paymethods ccard" data-pay="Credit 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="messages"></div>
  </div>
</div>
            
<div id="new_div" class="bar bar-balanced" style="display:none;"><h1 class="title">Message successfully send!</h1></div>

CSS

.paymethod {
    font-weight: bold;
    text-decoration: underline;
}

JavaScript

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


function notifyBar() {
 if (!$('.bar .bar-balanced').length) {
	  $('<div class="bar bar-balanced"><h1 class="title">You have chosen to pay <span class="pay-method"></span> upon delivery</h1></div>').prependTo('.messages');
 }
};

$cashInput.change(function(){
  if($cashInput.prop("checked")) {
      notifyBar();
    //$().toastmessage('showNoticeToast', 'You have chosen to pay');
  }
    else {
      $('.messages').text(''); 
       //$().toastmessage('removeToast', myToast);
    }
});


$(".paymethods").on("change", function(){
    var paymethods = [];
    $('.paymethods:checked').each(function(){        
        var payTypes = $(this).next().data("pay");
        paymethods.push(payTypes);
    });
    $(".pay-method").appendTo(paymethods.join(" & "));
});