Need help to make two tables like the illustration bellow. HTML and javascript and they need to work when we do calculations

Create a webpage to show the growth of investment in a table, as illustrated below. The program needs to satisfy the following requirements: (1) The title of the webpage is "Investment Calculator"; (2) Put your name on the page in Header 1 text; (3) Use a table for layout of text labels, three input controls, and one button. They are used to input annual investment (p), annual growth rate (i), and the length of investment (t); John Smith 4) When the user clicks the button, the web app creates a table to shows the total amount of principal and growth of the investment in each year; 5) The formulas to calculate the balance at the end of each year are: Suppose B(i) is the amount of balance at the end of i-the year, the process of calculation is as follows (we assume the annual contribution is made in the beginning of the year): At the end of the first year: B(1)=p(1+i) At the end of the second year: B(2)=(p+B(1))(1+i) At the end of the third year: B(3)=(p+B(2))(1+i) At the end of the t-th year: B(t)=(p+B(t1))(1+i) 6) The total amount of principal and balance in the end of each year must have two decimal places 7) If there is an existing growth table in the webpage, the web app deletes the existing table first. Therefore, there is only one table in the webpage that shows the growth based on the current input; 8) If any of user's input is less than or equal to 0 , the web app shows an error message and does nothing