How to add a data to table on submit

Question

After adding data in form and on click to submit to make this data appear below my table. Like description (that i added) under the description (table) , date (that i added) under the date (table) and so on. And amount under the names should be total amount divided by 4. for example: amount before submit was 100 euro and after submit 25. So eventually everybody will have 25 euro debt. Thanks in advance for any help. My code is:

 #body { background-color: grey } h1 { color:red; } .form{ background:#f1f1f1; width:400px; margin-top:30px; padding-left:10px; padding-top:20px; border-radius: 15px; } .form fieldset{border:0px; padding:0px; margin:0px;} .form p.contact { font-size: 12px; margin:0px 0px 15px 0;line-height: 10px; font-family:Arial, Helvetica;} .form input[type="text"] { width: 350px; } .form label { color: #000; font-weight:bold;font-size: 15px;font-family:Arial, Helvetica; } .form input, textarea { background-color: rgba(255, 255, 255, 0.4); border: 1px solid rgba(118, 128, 137, 0.7); padding: 7px; font-family: Keffeesatz, Arial; color: #4b4b4b; font-size: 14px; -webkit-border-radius: 5px; margin-bottom: 15px; margin-top: -10px; } .form input:focus, textarea:focus { border: 1px solid green; background-color: rgba(255, 255, 255, 1); } .form .select-style { -webkit-appearance: button; -webkit-border-radius: 2px; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none; background-image: url(images/select-arrow.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5); background-position: center right; background-repeat: no-repeat; border: 0px solid #FFF; color: #555; font-size: inherit; margin: 0; overflow: hidden; padding-top: 2px; padding-bottom: 5px; text-overflow: ellipsis; white-space: nowrap;} .form input.buttom{ background: #d8ba23; display: inline-block; padding: 5px 10px 6px; color: black; text-decoration: none; font-weight: bold; line-height: 1; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 1px 3px #999; -webkit-box-shadow: 0 1px 3px #999; box-shadow: 0 1px 3px #999; border: none; position: relative; cursor: pointer; font-size: 14px; font-family:Verdana, Geneva, sans-serif; } .form input.buttom:hover { background-color: #d88323;-moz-box-shadow: 0 5px 3px #999; -webkit-box-shadow: 0 5px 3px #999; box-shadow: 0 5px 3px #999; } 

 <center> <div class="form"> <form id="contactform" method="post" action=""> <p class="contact"><label for="description">DESCRIPTION</label></p> <input id="description" name="description" placeholder="Enter the description" required oninvalid="this.setCustomValidity('Please enter the description ')" oninput="setCustomValidity('')" type="text"> <p class="contact"><label for="amount">AMOUNT</label></p> <input id="amount" name="amount" placeholder="&#8364" required oninvalid="this.setCustomValidity('Please enter the amount ')" oninput="setCustomValidity('')" / type="number"> <p class="contact"><label for="reference period">REFERENCE PERIOD</label></p> <input id="reference period" name="reference period" placeholder="Enter the reference period" required oninvalid="this.setCustomValidity('Please enter the reference period ')" oninput="setCustomValidity('')" type="text"> <br> <input class="buttom" name="submit" id="btn" value="SUBMIT" type="submit" \\> </form> </div></center> <br> <div> <table> <tr><th>SULEYMAN</th></tr> <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td></tr> <tr><th>JACOPO</th></tr> <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td></tr> <tr><th>DENIS</th></tr> <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td></tr> <tr><th>LUCA</th></tr> <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td></tr> </table> </div> 

Answer 1

I am not sure this is what you want but have a look and let me know. Also, I don't have the form validations and styling please make sure to include them. Thanks

  $('#myForm').submit(function() { var desc = $('#name').val(); var amount = $('#username').val(); var ref = $('#date7').val(); var amount_byfour = amount/4; var desc_elements = document.getElementsByClassName("d"); for (var i=0; i<desc_elements.length; i++) { desc_elements[i].innerHTML+=desc+"<br>";} var ref_elements = document.getElementsByClassName("r"); for (var i = 0; i < ref_elements.length; i++) { ref_elements[i].innerHTML+=ref+"<br>";} var amount_elements = document.getElementsByClassName("a"); for (var i = 0; i < amount_elements.length; i++) { amount_elements[i].innerHTML+=amount_byfour+"<br>";} var debt_elements = document.getElementsByClassName("debt"); for (var i=0;i < debt_elements.length; i++){ var debt = debt_elements[i].innerHTML; var debt = Math.round((debt) * 1e12) / 1e12; debt_elements[i].innerHTML = debt + amount_byfour;} return false; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <form id="myForm"> <p class="contact"><label for="name">DESCRIPTION</label></p> <input id="name" name="name" placeholder="Enter the description" required type="text"> <p class="contact"><label for="username">AMOUNT</label></p> <input id="username" name="username" placeholder="&#8364" required type="number"> <p class="contact"><label for="name">REFERENCE PERIOD</label></p> <input id="date7" name="name1" placeholder="Enter the reference period" required type="text"> <input class="buttom" name="submit" id="btn" value="SUBMIT" type="submit"> </form> </div> <div> <table> <tr><th>SULEYMAN</th></tr> <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td><td>DEBT</td></tr> <tr><td class="d"></td><td class="r"></td><td class="a"></td><td class="debt">0</td></tr> <tr><th>JACOPO</th></tr> <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td><td>DEBT</td></tr> <tr><td class="d"></td><td class="r"></td><td class="a"></td><td class="debt">0</td></tr> <tr><th>DENIS</th></tr> <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td><td>DEBT</td></tr> <tr><td class="d"></td><td class="r"></td><td class="a"></td><td class="debt">0</td></tr> <tr><th>LUCA</th></tr> <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td><td>DEBT</td></tr> <tr><td class="d"></td><td class="r"></td><td class="a"></td><td class="debt">0</td></tr> </table> </div>