title: How to show multiple input values in different text fields using javascript
body: <p>I have multiple input fields as radio buttons where the user can select a button and then the radio buttons disappear and the selected value will be shown in a new div</p>
  
  <p>I am successfully getting single value if selected and able to show,But how to get input from multiple forms and show it individually in separate div</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="chat machine"&gt;
      &lt;p class="chat-message" id="course-picker"&gt;
          Which course do you want to choose?
          &lt;form method="post"&gt;
              &lt;!--Radio Buttons for getting course input --&gt;
              &lt;label class="container"&gt;
                  &lt;input type="radio" name="co1"value="course 1"&gt;
                  &lt;span class="checkmark"&gt;Course 1&lt;/span&gt;
              &lt;/label&gt;
              &lt;label class="container"&gt;
                  &lt;input type="radio"  name="co2"value="course 2"&gt;
                  &lt;span class="checkmark"&gt;Course 2&lt;/span&gt;
              &lt;/label&gt;
              &lt;label class="container"&gt;
                  &lt;input type="radio"  name="co3"value="course 3"&gt;
                  &lt;span class="checkmark"&gt;Course 3&lt;/span&gt;
              &lt;/label&gt;
              &lt;label class="container"&gt;
                  &lt;input type="radio"  name="co4"value="course 4"&gt;
                  &lt;span class="checkmark"&gt;Course 4&lt;/span&gt;
              &lt;/label&gt;
          &lt;/form&gt; 
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="chat self" id="self-chat"&gt;
      &lt;p class="chat-message"&gt;&lt;span id="result"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      jQuery(':radio').click(function () {
          $("#result").text(this.value);
          $("#course-picker").hide();
      });
  &lt;/script&gt;
  
  &lt;div class="chat machine"&gt;
      &lt;p class="chat-message" id="preference"&gt;
          Which course do you want to choose?
          &lt;form method="post"&gt;
              &lt;!--Radio Buttons for getting course input --&gt;
              &lt;label class="container"&gt;
                  &lt;input type="radio" name="p1"value="prefer 1"&gt;
                  &lt;span class="checkmark"&gt;prefer 1&lt;/span&gt;
              &lt;/label&gt;
              &lt;label class="container"&gt;
                  &lt;input type="radio"  name="p2"value="prefer 2"&gt;
                  &lt;span class="checkmark"&gt;prefer 2&lt;/span&gt;
              &lt;/label&gt;
          &lt;/form&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="chat self" id="self-chat"&gt;
      &lt;p class="chat-message"&gt;&lt;span id="result1"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      jQuery(':radio').click(function () {
          $("#result1").text(this.value);
          $("#preference").hide();
      });
  &lt;/script&gt;
  </code></pre>