Display the value of selected radio button and checkboxes

I have a set of radio buttons, checkboxes and a datepicker inside of a form. I want to use JQuery to display the selected options before submitting the form... sort of like a preview before submit page. I don't know why my JQuery is not working. I also have fields and those display just fine. Just can't get the radio button selection value, checkbox select value or the datepicker select value to show up. Here is my HTML below:

<div class="col-12 col-md-6">
     <input type="text" id="f-name" name="full-name" placeholder="Full Name*" onblur="if (this.placeholder == '') {this.placeholder = 'Full Name*';}" onfocus="if (this.placeholder == 'Full Name*') {this.placeholder = '';}">
</div>
 <div class="col-12 col-md-4">
      <span>Date of Request*</span>
      <input type="text" id="request-date" placeholder="Select a Date" class="input-type-date datepicker-here" data-language="en" onblur="if (this.placeholder == '') {this.placeholder = 'Select a Date';}" onfocus="if (this.placeholder == 'Select a Date') {this.placeholder = '';}">
</div>
<div class="col-12 col-md-4">
     <span>Contact Preference*</span>
     <label for="phone">
     <input type="radio" name="contact-pref" value="Phone" id="phone"> Phone
     </label>
     <label for="email">
     <input type="radio" name="contact-pref" value="Email" id="email"> Email
     </label>
</div>
<div class="col-12 col-md-4">
     <label for="spec-st"><input type="checkbox" name="info-pref" id="spec-st" value="Specification Street"> Specification Street</label>
</div>
<div class="col-12 col-md-4">
     <label for="parts-n-kits"><input type="checkbox" name="info-pref" id="parts-n-kits" value="Parts &amp; Kits List"> Parts &amp; Kits List</label>
</div>

... Down below in the form in the preview page:

<div class="col-12 col-md-5 spacing">
     <h5><strong>Full Name</strong></h5><div id="input1"></div>
</div>
<div class="col-12 col-md-5 spacing">
     <h5><strong>Date of Request</strong></h5><div id="input7"></div>
</div>
<div class="col-12 col-md-5 spacing">
     <h5><strong>Contact Preference</strong></h5><div id="input9"></div>
</div>
<div class="col-12 col-md-5 spacing">
     <h5><strong>Report Preferences</strong></h5><div id="input10"></div>
 </div>

Here is the JQuery:

$('#f-name').keyup(function() {
    $('#input1').text($(this).val());
});
$('#request-date').click(function() {
    $('#input7').text($(this).val());
});
$("[name='contact-pref']:checked").each(function () {
    $('#input9').text($(this).val());
});
$("[name='info-pref']:checked").each(function () {
    $('#input10').text($(this).val());
});