// Add change event for you radio button class
$(".addressRadio").change(function() {

  // Check the radio button group name
  // So you can have multiple radio groups on a single page
  radioGroup = $(this).attr("name");

  // Cycle through each of the associated radio buttons
  $("input[type='radio'][name='" + radioGroup + "']").each(function() {
  
    // Remove any selected classes from the wrapping label
    $(this).closest("label").removeClass("selected");

  });

  // Check if the changed radio button has been selected 
  if ($(this).is(":checked")) {

    // Add the selected class if it has
    $(this).closest("label").addClass("selected");

  }

});

label.fullWidth {
  width: 100%;
  font-size: 1rem;
}

.card-input-element+.card {
  /*height: calc(36px + 2*1rem);*/
  color: #005499;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 2px solid transparent;
  border-radius: 4px;
  border: 2px solid #ccc;
}

.card-input-element+.card:hover {
  cursor: pointer;
  background-color: #eee;
  border: 2px solid #005499;
}

.card-input-element:checked+.card {
  border: 2px solid #c3e6cb;
  background-color: #d4edda;
  -webkit-transition: border .3s;
  -o-transition: border .3s;
  transition: border .3s;
  content: '\f00c';
  color: #0e6d2e;
  font-family: 'FontAwesome';
  font-size: 24px;
  -webkit-animation-name: fadeInCheckbox;
  animation-name: fadeInCheckbox;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.card-input-element:checked+.card::after {
  content: '\f00c';
  color: #0e6d2e;
  font-family: 'FontAwesome';
  font-size: 24px;
  -webkit-animation-name: fadeInCheckbox;
  animation-name: fadeInCheckbox;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  top: 0;
  right: 5px;
}

@-webkit-keyframes fadeInCheckbox {
  from {
    opacity: 0;
    -webkit-transform: rotateZ(-20deg);
  }
  to {
    opacity: 1;
    -webkit-transform: rotateZ(0deg);
  }
}

@keyframes fadeInCheckbox {
  from {
    opacity: 0;
    transform: rotateZ(-20deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}

.addressField {
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  margin-bottom: 5px;
}

.radioCard {
  padding: 20px;
  margin: 6px 0;
  position: relative;
}

.radioCard:hover {
  background-color: #eee;
  cursor: pointer;
}


/* note: the position relative goes with the position absolute on the ::after to get the checkmark in the top-right of the div */


/* hiding actual radio button away from screen */

input[type="checkbox"].hideOffScreen,
input[type="radio"].hideOffScreen {
  position: absolute;
  margin-left: -9999px;
}

.btn-success-custom {
  font-family: "ProximaNova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-color: #28a745;
  color: #fff;
  border-radius: 3px;
  padding-top: 9px;
  min-height: 38px;
  transition: background 0.5s ease 0s;
  -webkit-transition: background 0.5s ease 0s;
  -moz-transition: background 0.5s ease 0s;
  -ms-transition: background 0.5s ease 0s;
}

.btn-success-custom:hover,
.btn-success-custom:focus,
.btn-success-custom:active,
.btn-success-custom.active,
.open .dropdown-toggle.btn-success-custom {
  background-color: #218838;
  color: #fff;
}

.btn-success-custom:active,
.open .dropdown-toggle.btn-success-custom {
  background-image: none;
}

label .selectedAddressButton,
label.selected .deliverButton {
  display: none;
}

label.selected .selectedAddressButton,
label .deliverButton {
  display: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <div>Is the address you'd like to use displayed below? If so, select the corresponding box below. Or, you can <a>enter a different address</a>.</div>
    <div class="radioPanel">
      <label class="fullWidth">
<input type="radio" name="selectAddress" class="card-input-element d-none hideOffScreen addressRadio" id="address1" value="address1">
<div class="card card-body bg-light d-flex flex-row justify-content-between align-items-center radioCard">
<div class="addressField">John Doe</div>
<div class="addressField">123 Anytown St.</div>
<div class="addressField">Springfield, MD 22365</div>
<div class="row">
<div class="col-md-12 text-left">
<div class="deliverButton" style="margin-top:12px;">
<div type="button" class="btn btn-primary-custom" style="margin-right:10px;">Deliver to this Address</div>
</div>
<div class="selectedAddressButton" style="margin-top:12px;">
<div style="margin-top:12px;"><div type="button" class="btn btn-success-custom" style="margin-right:10px;"><i class="fa fa-check" aria-hidden="true" style="padding-right:6px;"></i>Selected Address</div></div>
</div> 
</div>
</div>
<div class="row">
<div class="col-md-12 text-left =" style="margin-top:15px;">  
<button type="button" class="btn btn-secondary-custom" style="margin-right:10px;">Edit</button>
<button type="button" class="btn btn-secondary-custom">Delete</button>   
</div>
</div>
</div>
</label>
      <label class="fullWidth" style="margin-top:10px;">
<input type="radio" name="selectAddress" class="card-input-element d-none hideOffScreen addressRadio" id="address2" value="address2">
<div class="card card-body bg-light d-flex flex-row justify-content-between align-items-center radioCard">
<div class="addressField">Sally Smith</div>
<div class="addressField">555 Elm St.</div>
<div class="addressField">Nantucket, CA 55698</div>
<div class="row">
<div class="col-md-12 text-left">
<div class="deliverButton" style="margin-top:12px;">
<div type="button" class="btn btn-primary-custom" style="margin-right:10px;">Deliver to this Address</div>
</div>
<div class="selectedAddressButton" style="margin-top:12px;">
<div style="margin-top:12px;"><div type="button" class="btn btn-success-custom" style="margin-right:10px;"><i class="fa fa-check" aria-hidden="true" style="padding-right:6px;"></i>Selected Address</div></div>
</div> 
</div>
</div>
<div class="row">
<div class="col-md-12 text-left =" style="margin-top:15px;">  
<button type="button" class="btn btn-secondary-custom" style="margin-right:10px;">Edit</button>
<button type="button" class="btn btn-secondary-custom">Delete</button>   
</div>
</div>
</div>
</label>
    </div>
    <!-- /.radioPanel -->
  </div>
</div>

// Create new list and append to end of body
$("body").append("<ul class='class-list'></ul>");

// Append all list items that have the class attribute
$("ul.class-list").append( $("li[class]") );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
<ul>
    <li class="specialOne">Some Content + class</li>
    <li>Some Content</li>
    <li>Some Content</li>
    <li>Some Content</li>
    <li class="specialTwo">Some Content + class</li>
    <li class="specialThree">Some Content + class</li>
    <li>Some Content</li>
</ul>
</body>

$(document).on("change keyup paste click", "#dateTime", function() {

  var dateTime = $(this).val();

  // Split on '-'
  var el = dateTime.split('-');

  // Remove the time - we know rimes will always be entered as 'xx:xx:xx' - i.e. 8 characters
  el[2] = el[2].substring(0, el[2].length - 8);

  // Print to console
  $("#dateOutput").text( el );

});

$("#dateTime").click();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>You can test out the function below</p>
<p>Remember that it expects an eight character time string at the end of the string</p>
<input id="dateTime" value="2018-12-2417:25:33">
<p id="dateOutput"></p>

$("#check").click(function() {

  // Uncomment the line below if you want to reset the list
  // $("#lists .favourite-list").remove();

  // Create variable to store list of foods if selected
  tempList = ""

  // Check if any foods are selected
  $('[name="food"]:checked').each(function() {

    // Get the text value of the label
    // Should do this, rather than use 'for' value as it might differ
    checkLabel = $("label[for='" + $(this).attr("value") + "']").text();

    // Append a new list element
    tempList = tempList + "<li>" + checkLabel + "</li>";

  })

  // Check if at least one food has been added
  if (tempList != "") {

    // Add ul wrappers to list and header.
    tempList = "<div class='favourite-list'><p>Favourite Foods:</p><ul>" + tempList + "</ul></div>"

    // Append new list
    $("#lists").append(tempList);

  }

});

#check {
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
  <legend>Pick the foods you like.</legend>

  <input id="tacos" type="checkbox" name="food" value="tacos">
  <label for="tacos">Tacos</label>

  <input id="crepes" type="checkbox" name="food" value="crepes">
  <label for="crepes">Crepes</label>

  <input id="dumplings" type="checkbox" name="food" value="dumplings">
  <label for="dumplings">Dumplings</label>

</fieldset>

<button id="check">Add to list</button>

<div id="lists">

</div>