jQuery for each input change text for matching element

Question

I'm making a printable ICE card. User enters info in form inputs and they are shown preview below.

The code I have is working fine, but I have to copy/paste it for each input/element match. I want to compress the code so that it listens for changes for each input and changes the text for matching element.

Snippet below. JSFiddle is here

$("#inputName").keyup(function() {
  $("#spanName").html($(this).val());
});

$("#inputHCN").keyup(function() {
  $("#spanHCN").html($(this).val());
});

$("#inputDOB").keyup(function() {
  $("#spanDOB").html($(this).val());
});

* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
  </p>
  <p>
    <input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
  </p>
  <p>
    <input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>

Answer 1

Data attributes is the way I would go

$("[data-out]").keyup(function() {
  var selector = $(this).data("out");
  $(selector).text($(this).val());
});

* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name" data-out="#spanName">
  </p>
  <p>
    <input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #" data-out="#spanHCN">
  </p>
  <p>
    <input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B." data-out="#spanDOB">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>

Answer 2

Add data-target attribute to your form elements with ids of elements where the text should be displayed:

<input type="text" name="inputName" data-target="#spanName" class="form-control" id="inputName" placeholder="Name">

Now change your scripts to display the text. Note that I am using two events keyup and change so that copy-paste would work as well.

$(".form-control").on('keyup change', function(e) {
  var target = $(this).data("target");
  $(target).html($(this).val());
});

Demo shown below:

$(".form-control").on('keyup change', function(e) {
  var target = $(this).data("target");
  $(target).html($(this).val());
});

* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="inputName" data-target="#spanName" class="form-control" id="inputName" placeholder="Name">
  </p>
  <p>
    <input type="text" name="inputHCN" data-target="#spanHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
  </p>
  <p>
    <input type="text" name="inputDOB" data-target="#spanDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>