Html/JS: Link cell values of one column of one table from cells of another column of another table

Question

I am new to coding and am trying to make a table using values from another table.

For example, the following table has a column for "Contact" (names)

<table>
<tr>
<th>Role</th>
<th>Contact</th>
<th>Email</th>
</tr>
<tr>
<td>Role1</td>
<td>Person1 </td>
<td>[email protected]</td>
</tr>
<tr>
<td>Role2</td>
<td>Person2</td>
<td>[email protected]</td>
</tr>
</table>

My second table (ttask) has a list of tasks and has a column for the "Contact" assigned to a task. I would like to link the value for the Contact cells in the following table with its corresponding Contact in the 1st table so that if I change the Contact's name in the 1st table, it will update in all the Table ttask cells involving that Contact's name. How can I make this happen?

<table id="ttask">
  <tr>
    <th>Weeks Prior</th>
    <th>Role</th>
    <th>Contact</th>
    <th>Task</th>
  </tr>
  <tr>
    <td>16</td>
    <td>AH</td>
    <td>Person1</td>
    <td>
      What currently needs to be done. The task and what's involved blah blah
    </td>
  </tr>
</table>

Thank you so much!

Answer 1

first take different id for both table td and try this

$(document).ready(function(){
   VAR abc = $(document.getElementById("tdidoffirsttable").innerHTML);
     document.getElementById("td id of second table").innerHTML = abc; 

});

Answer 2

The question is somewhat unclear because you didn't mention if you are willing to use html only or not. If you are willing to consider javascript, then this can work:

<p id="demo1">person1</p>

<p id="demo2">person2</p>

<script>
function myFunction() {
    var str = document.getElementById("demo2").innerHTML; 
    document.getElementById("demo1").innerHTML = str;
}
myFunction();
</script>

Of course this is per row, if you data contains multiple lines then should be adapted by doing a loop in order to simplify.