title: Jquery and Tables
body: <p>I have an HTML form that I am pulling data from and and using jQuery to gather the form data and put it below. However, when I click the button the function works, but I can't get it to go down in the table with each entry in a separate row. It just stacks until the line is full then goes to the next line. I want to be able to edit this so that it lines up under each other.  Here is my code: </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;jQuery&lt;/title&gt;       
       &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;script type="text/javascript"             src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;             
              $(document).ready(function(){
               $('#button').click(function(){
              var row1 = document.getElementById("1stname").value;
              var row2 = document.getElementById("2ndname").value;
              var row3 = document.getElementById("3rdname").value;
              var row4 = document.getElementById("4thname").value;
              $('#row1 ').append(row1, row2, row3, row4) ;                
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body &gt;
  &lt;div id='wrapper'&gt;
  &lt;div id="col"&gt;
          &lt;table id='tabletop'&gt;
            &lt;tr&gt;
              &lt;th id='first'&gt;First Name&lt;/th&gt;
              &lt;th id='last'&gt;Last Name&lt;/th&gt; 
              &lt;th id='email'&gt;Email Address&lt;/th&gt;
              &lt;th id='contact'&gt;Contact #&lt;/th&gt;
            &lt;/tr&gt;
            &lt;/table&gt;
            &lt;/div&gt;
          &lt;p id="row1"&gt;&lt;/p&gt;           
   &lt;/div&gt;
  
   &lt;div id=formdiv&gt;
    &lt;form id='form1' &gt;
    First name:&lt;br&gt;
    &lt;input id='1stname' type="text" name="firstname" value="First Name"&gt;
    &lt;br&gt;
    Last name:&lt;br&gt;
    &lt;input id='2ndname' type="text" name="lastname" value="Last Name"&gt;
    &lt;br&gt;
    Email Address:&lt;br&gt;
    &lt;input id='3rdname' type="text" name="emailaddress" value="Email Address"&gt;
    &lt;br&gt;
    Contact No:&lt;br&gt;
    &lt;input id='4thname' type="text" name="contactno" value="Phone #"&gt;
    &lt;br&gt;&lt;br&gt;
  
  &lt;/form&gt; 
      &lt;input id="button" type="submit" value="Add User"&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>/*CSS reset settings here*/
  *{
   margin: 0px;
   padding: 0px;
  }
  
  #wrapper{
      width: 490px;
      border: 1px solid black;
  }
  #col{
  
      border: 1px solid green;
      display: inline-block;
  }
  
  #col2{
      border: 1px solid black;
      display: inline-block;
  }
  
  #tabletop{
      border: 1px solid red;
      width: 490px;
      display: block;
  }
  
  #formdiv{
      display: inline-block;
  }
  </code></pre>