Conditionally display Text based on checkbox selection

HTML

<input type="checkbox" id="money" class="paymethods cash">
<label data-text="cash from data" for="money">In Cash</label>
    
<input type="checkbox" id="card" class="paymethods ccard">
<label data-text="card from data" for="card">Credit Card</label>
    
<div class="messages">You have chosen to pay <span class="pay-method" data-cash="In cash" data-card="Credit Card" data-paymix="In cash & Credit Card"></span> for your order upon delivery</div>

CSS

body {
 font-family: "Helvetica", arial, sans-serif;
 font-size: 14px;
 padding: 30px;
}

.messages {
 font-family: "Helvetica", arial, sans-serif;
 font-size: 14px;
 display: block;
 background:#3ABC4B;
 color: #fff;
 margin: 10px auto;
 padding: 20px;
}

.pay-method {
 font-weight: 600;
}

JavaScript

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