title: Create live preview of form inputs
body: <p>I have a multistep form, and am trying to create a live preview of values entered into various inputs, text areas and radio buttons.</p>
  
  <p>So far i have the form built and have some success using the following</p>
  
  <p>.js</p>
  
  <pre><code>$("input[type='text']").change(function() {
      $("#preview").append($("input[type='text']").val());
  });
  </code></pre>
  
  <p>.html</p>
  
  <pre><code>&lt;div id="preview"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This works for the first input however the second input repeats the first input's value.</p>
  
  <p>I was going to go thru and make a jquery call for each elements id, but is there another way to use classes or .next etc. I would like if preferable to have the inputs label repeated then a colon then the value. So in .html Is this possible.</p>
  
  <pre><code>&lt;div id="preview"&gt;
      &lt;div&gt;Input Label: Input Value&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>