title: jQuery change text of paragraph span tag according to the value of form input
body: <p>I have a class of 'friends-name' on the span of the paragraph that should take the value of 'input[name="friends-first-name"].</p>
  
  <p>I have a class of 'your-first-name' on the span of the paragraph that should take the value of 'input[name='your-first-name'].</p>
  
  <p>My code is as follows:</p>
  
  <pre><code>           &lt;div class="form-message"&gt;
                  &lt;p&gt;Hey &lt;span class="friends-name"&gt;[Friend's First Name],&lt;/span&gt;&lt;/p&gt;
                  &lt;p&gt;I wanted to reach out b/c I bumped into a solid company. They do fulfillment - shipping - for rising stars&lt;/p&gt;
                  &lt;p&gt;I'll let you guys take it from there!&lt;/p&gt;
                  &lt;p class="your-first-name"&gt;[Your First Name]&lt;/p&gt;
              &lt;/div&gt;
  
  
             &lt;form id="referral-form" method="POST"&gt;
  
                      &lt;div class="form-left"&gt;
                          &lt;div class="form-fieldset form-fieldset_type-personal"&gt;
                              &lt;h3 class="form-fieldsetHeading"&gt;Your Info&lt;/h2&gt;
                              &lt;input class="form-field" data-bind="value: firstName" type="text" name="your-first-name" placeholder="First Name"&gt;
                              &lt;input class="form-field" data-bind="value: lastName" type="text" name="your-last-name" placeholder="Last Name"&gt;
                              &lt;input class="form-field" data-bind="value: email" type="email" name="your-email" placeholder="Email"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-right"&gt;
                          &lt;div class="form-fieldset form-fieldset_type-friends"&gt;
                              &lt;h3 class="form-fieldsetHeading"&gt;Friend's Info&lt;/h2&gt;
                              &lt;div data-bind="foreach: friends"&gt;
                                  &lt;div class="form-friend"&gt;
                                      &lt;input class="form-field" data-bind="value: firstName" name="friends-first-name" type="text" placeholder="First Name"&gt;
                                      &lt;input class="form-field" data-bind="value: lastName" name="friends-last-name" type="text" placeholder="Last Name"&gt;
                                      &lt;input class="form-field" data-bind="value: company" name="friends-company" type="text" placeholder="Company"&gt;
                                      &lt;input class="form-field" data-bind="value: email" name="friends-email" type="email" placeholder="Email"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
              &lt;/form&gt;
  </code></pre>
  
  <p>Any way to do this using jQuery?</p>