title: How to loop these calculations to get an output for up to 10 records and display them in a table format?
body: <p>I have wrote some code to calculate certain values. There are two parts to my question which are the following: First, how do I loop my calculations to get up to 10 records based on the result of first record and have them displayed on the web page in a table format? Second, <code>costOne</code> and <code>costTwo</code> computations should only apply on records starting based on the input year. How do I set that condition? In the example below as you can see, I inputted the following values:</p>
  <p>Input:</p>
  <pre><code>Amount: 1500
  Input One: 10
  Input Two: 5
  Starting Year: 4
  Percentage: 15
  </code></pre>
  <p>In the output example below, the cost A and cost B values have computed starting year 4 or record number 4 as the Starting Year input value was 4.</p>
  <p>Code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;Test&lt;/title&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      function calculate() {
        //Inputs
        var amount = document.getElementById('amount').value;
        var inputOne = document.getElementById('inputOne').value;
        var inputTwo = document.getElementById('inputTwo').value;
        var years = document.getElementById('years').value;
        var percentage = document.getElementById('percentage').value;
  
        //Calculations
        var calcOne = +amount + (+amount * +inputOne / 100);
        var calcTwo = +amount + (+amount * +inputTwo / 100);
        var diff = +calcTwo - +calcOne;
  
        //Only apply these calculations on rows starting based on the 'year' input
        var costOne = +calcOne * +percentage / 100;
        var costTwo = +calcTwo * +percentage / 100;
  
        //Display/Print the output in a table format...
        console.log(calcOne);
        console.log(calcTwo);
        console.log(diff);
        console.log(costOne);
        console.log(costTwo);
      }
    &lt;/script&gt;
  
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;table width="350" border="0"&gt;
  
      &lt;tr&gt;
        &lt;td&gt;Amount:&lt;/td&gt;
        &lt;td&gt;&lt;input class="form-control" name="amount" id="amount" value="" type="number" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Input One:&lt;/td&gt;
        &lt;td&gt;&lt;input class="form-control" name="inputOne" id="inputOne" value="" type="number" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Input Two:&lt;/td&gt;
        &lt;td&gt;&lt;input class="form-control" name="inputTwo" id="inputTwo" value="" type="number" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Starting Year:&lt;/td&gt;
        &lt;td&gt;&lt;input class="form-control" name="years" id="years" value="" type="number" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Percentage&lt;/td&gt;
        &lt;td&gt;&lt;input class="form-control" name="percentage" id="percentage" value="" type="number" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td&gt;&lt;input type="button" name="calculate" id="calculate" value="calculate" onClick="calculate()" /&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="button" name="clear" id="clear" value="clear" onClick="clear()" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;div id="info"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Desired Output (Result):
  <a href="https://i.stack.imgur.com/wUSNh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wUSNh.jpg" alt="Output Example" /></a></p>
  <div class="s-table-container">
  <table class="s-table">
  <thead>
  <tr>
  <th>Year</th>
  <th>First Value</th>
  <th>Second Value</th>
  <th>Difference</th>
  <th>Cost A</th>
  <th>Cost B</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>1</td>
  <td>1650</td>
  <td>1575</td>
  <td>-75</td>
  <td>0</td>
  <td>0</td>
  </tr>
  <tr>
  <td>2</td>
  <td>1815</td>
  <td>1733</td>
  <td>-82</td>
  <td>0</td>
  <td>0</td>
  </tr>
  <tr>
  <td>3</td>
  <td>1997</td>
  <td>1906</td>
  <td>-91</td>
  <td>0</td>
  <td>0</td>
  </tr>
  <tr>
  <td>4</td>
  <td>2197</td>
  <td>2097</td>
  <td>-100</td>
  <td>330</td>
  <td>315</td>
  </tr>
  <tr>
  <td>5</td>
  <td>2417</td>
  <td>2307</td>
  <td>-110</td>
  <td>363</td>
  <td>346</td>
  </tr>
  <tr>
  <td>6</td>
  <td>2659</td>
  <td>2538</td>
  <td>-121</td>
  <td>399</td>
  <td>381</td>
  </tr>
  <tr>
  <td>7</td>
  <td>2925</td>
  <td>2792</td>
  <td>-133</td>
  <td>439</td>
  <td>419</td>
  </tr>
  </tbody>
  </table>
  </div>