title: Display multiple input values each in a new line in one div Jquery/Javascript
body: <p>I am making a form where a user can input many descriptions and later view all the details that he\she has inputed. I am using a repeating region to gather this descriptions(in a texfield with id description) and I want the user to be able to preview the info they have provided before printing/saving</p>
  
  <p>Is there a way I can collect all the information in the repeated textfield id(description) and display them in one div as they appear? e.g if a user types in the first row - "Stack" and in the second repeated row "Overflow"./ The user should see: </p>
  
  <ul>
  <li>Stack</li>
  <li>Overflow</li>
  </ul>
  
  <p>(Ignore the bullets) in a particular divtag. Basically I need to fetch all input with Id description and display each of them in a new line in a div.</p>
  
  <p>All help greatly appreciated</p>
  
  <p><strong>EDIT:
  Here is the HTML code</strong> </p>
  
  <pre><code> &lt;tr&gt;
      &lt;td&gt;&lt;label for="description"&gt;&lt;/label&gt;
        &lt;textarea name="description" cols="35" rows="2" id="description"&gt;&lt;/textarea&gt;&lt;/td&gt;
      &lt;td&gt;&lt;label for="accountcodes"&gt;&lt;/label&gt;
        &lt;input type="text" style="text-transform:uppercase;" name="accountcodes" id="accountcodes"&gt;&lt;/td&gt;
      &lt;td width="10" align="center"&gt;T1
        &lt;label for="T1"&gt;&lt;/label&gt;
        &lt;input name="T1" type="text" class="tcodes" id="T1" size="10"&gt;&lt;/td&gt;
      &lt;td width="10" align="center"&gt;T2
        &lt;label for="T2"&gt;&lt;/label&gt;
        &lt;input name="T2" type="text" class="tcodes" id="T2" size="10"&gt;&lt;/td&gt;
      &lt;td width="20" align="center"&gt;T3
        &lt;label for="T3"&gt;&lt;/label&gt;
        &lt;input name="T3" type="text" class="tcodes" id="T3" size="15"&gt;&lt;/td&gt;
      &lt;td width="10" align="center"&gt;T4
        &lt;label for="T4"&gt;&lt;/label&gt;
        &lt;input name="T4" type="text" class="tcodes" id="T4" size="10"&gt;&lt;/td&gt;
      &lt;td width="10" align="center"&gt;T5
        &lt;label for="T5"&gt;&lt;/label&gt;
        &lt;input name="T5" type="text" class="tcodes" id="T5" size="10"&gt;&lt;/td&gt;
      &lt;td width="10" align="center"&gt;T6
        &lt;label for="T6"&gt;&lt;/label&gt;
        &lt;input name="T6" type="text" class="tcodes" id="T6" size="10"&gt;&lt;/td&gt;
      &lt;td width="10" align="center"&gt;T8
        &lt;label for="T8"&gt;&lt;/label&gt;
        &lt;input name="T8" type="text" class="tcodes" id="T8" size="10"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;label for="amount"&gt;&lt;/label&gt;
        &lt;input name="amount" type="text" id="amount" size="10"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;a id="deletedesc" style="font-size:12px; color:#FF0000;" href="#delete"&gt;Delete&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
  </code></pre>
  
  <p>Just need all inputs with ID description to be displayed in one div each in a new line. The above is the HTML code I am cloning</p>
  
  <p><strong>NEW EDIT</strong></p>
  
  <p>Using some piece of code from Ninja, I have come up with this jquery code but I must use an alert for it to work and it works for Firefox only</p>
  
  <pre><code>$("#preview").click(function(){
      var description = '';
      var accountcodes='';
      $("#loadpage").show();
      $("#loadpage").load("pvpreview.php");
      //append all descriptions   
      $("#descriptiontable #description").each(function() 
      {
       description = $(this).val(); 
       //alert(description)
       $("#prevdescription").append('&lt;p&gt;' + description + '&lt;/p&gt;');
  }); 
      //append all account codes
      $("#descriptiontable #accountcodes").each(function() 
      { 
       accountcodes = $(this).val();  
       $("#prevaccountcodes").appendTo('&lt;p&gt;' + accountcodes + '&lt;/p&gt;');
  }); 
  
  
      });
  </code></pre>
  
  <p>Please note I am appending to a page that is being loaded. #prevdescription and #prevacountcodes are in the loaded page</p>