Entering data in an input and then displaying just the text entered elsewhere on page

Question

I am creating a checkout page and I cannot figure out how to do the following. When the customer enters their shipping information, I want to display that same information further down the page in a confirmation section. I will not be submitting the information until the customer places the order, so there is no way to echo this information as I won't be submitting to my db until after they submit it.

I looked into this and I see things with a data-copy function and that is basically what I need except I do not want the copied data to show up in an input field. I just want it to display the text.

So if I had the following field:

Shipping street: 123 Main St.

I would want the 123 Main St to show up in a different section of the page.

I tried doing the data-copy function and I couldn't even get that to work. I'm not sure if this is the best method to use for this. I do not want the copied data to be editable. I have disabled that from my code.

I tried doing this:

<div class="field">
    <label class="paddingleft" for="fullname">Full Name</label>
        <div class="center"><input type="text"  class="biginputbarinline preview" id="ShipToFullname" data-copy="name" name="ShipToFullname" required>          </div>
</div>

This is the confirmation part farther down the page:

<p><input type="text" class="preview" id="name" disabled></p>

The Jquery

$(document).ready(function() {
$(".preview").keyup(function() {
     var ElemId = $(this).data('copy');
    $("#"+ElemId).val($(this).val());
 });
});

Is there a better way I can do this and most importantly an input field not show up with the copied data?

UPDATED CODE

<div class="center">
    <div class="field">
        <label class="paddingleft" for="fullname">Full Name</label>
        <div class="center"><input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required></div>
    </div>

Confirmation part

<p>Shipping to:</p>
    <p><div class="preview" id="name"></div></p>

The Jquery

$(document).ready(function() {
 $(".preview").on('keyup', function() {
$($(this).data('copy')).html($(this).val());
 });
});

Answer 1

Is this what you want?

Note that data-copy="name" should now be data-copy="#name" for it to work

$(document).ready(function() {
  $(".preview").on('keyup', function() {
    $($(this).data('copy')).html($(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="field">
  <label class="paddingleft" for="fullname">Full Name</label>
  <div class="center">
    <input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required>
  </div>
</div>

<br>

Your name is:
<div id="name"></div>