Okay so when I click the add Row button that works just fine, but when I click the Assign Button I want it to assign the variables that are selected into the appropriate row and cells but for some reason it change only the top row. I am somewhat new at Javascript any help would be much appreciated.<script>function myFunction() {    var table = document.getElementById(Table1);    var row = table.insertRow(2);        var cell1 = row.insertCell(0);    var cell2 = row.insertCell(0);    var cell3 = row.insertCell(0);    var cell4 = row.insertCell(0);    var cell5 = row.insertCell(0);    var cell6 = row.insertCell(0);        cell6.innerHTML = ' <button onclick=myFunction1()> Assign </button> ';    cell5.innerHTML =  A ;    cell4.innerHTML =  B ; cell3.innerHTML = ' <center id=demo1> '; cell2.innerHTML = ' <center id=demo2> '; cell1.innerHTML = ' <center id=demo3> ';    }             function myFunction1() {                  var a = document.getElementById(select1);                 var b = document.getElementById(select2);                 var c = document.getElementById(select3);                         var x1 = a.options[a.selectedIndex].text;                 var x2 = b.options[b.selectedIndex].text;                 var x3 = c.options[c.selectedIndex].text;                                       document.getElementById(demo1).innerHTML = x1;                  document.getElementById(demo2).innerHTML = x2;                  document.getElementById(demo3).innerHTML = x3;}                       </script><!DOCTYPE html><html><head><style>table, td {    border: 1px solid black;}</style></head><body><p>Click the button to add a new row at the first position of the table and then add cells and content.</p><h5> <b> SELECT SORT VARIABLES FOR STRATUM </b></h5><h1> </h1><div class=unselected-field style=display: inline-block; position: left; ><h1> </h1>    <span> SORT VARIABLE 1: </span> <select id=select1 name=SORTONE value=EMPLOYMENT>    <option> EMPLOYMENT </option>     <option> WAGES </option> </select> <h1> </h1>   <span>SORT VARIABLE 2: </span> <select id=select2 name=SORTTWO value=NONE> <option> NONE </option>    <option> EMPLOYMENT </option>     <option> WAGES </option> </select>  <h1></h1> <span>SORT VARIABLE 3: </span> <select id=select3 name=SORTTHREE value=NONE> <option> NONE </option>    <option> EMPLOYMENT </option>     <option> WAGES </option> </select><h1></h1><table  id=Table1 align=right style=margin:2% 10% auto;>             <tr>             <th bgcolor=grey> ASSIGN </th>             <th bgcolor=grey> SS </th>             <th bgcolor=grey> DESCRIPTION </th>             <th bgcolor=grey> SORT ORDER 1 </th>             <th bgcolor=grey> SORT ORDER 2 </th>             <th bgcolor=grey > SORT ORDER 3 </th>             </tr>             <tr><td> <button onclick=myFunction1()> Assign </button> </td>             <td><center> -- </center> </td>             <td> DEFAULT SINGLE </td>             <td> <center id=demo1> </td>             <td> <center id=demo2> </td>              <td> <center id=demo3> </td>             </tr>             </table><br><button onclick=myFunction()> Add New Row </button></body></html>
Inner HTML into new table row from Drop Down Menu
javascript;html