Compare value between two columns and add a row

I have created these tables which has the cost details of the items. Whenever I click "select" button on any table, I want to change the buttons on remaining table to "compare" from "select" and difference should be displayed besides the content of table which is being compared(2nd table). How can i do that? Any help?

.table_container{
        float:left;
        width:25%;
    }
    .container::after{  
  content: "";
  clear: both;
  display: table;
    }
    table{
        margin: 0 auto; 
        
        border-radius: 10px;
    }
    tr{
        padding: 15px;
        text-align: center;
    }
    td{
        color: black;
        text-align: center;
        vertical-align: middle;
        border: 1px double white;
        height: 50px;
        background-color: #e1edf9;
        width:272px;
    }
    .sub_text{
        font-size: 12px;
        font-style: italic;
        color: #0071ce;
        font-weight: 100;
    }
    th{
        text-align: center;
        padding: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: white;
        font-weight: bold;
    }
    .header{
        color: #0071ce;
        font-weight: bold;
        padding: 10px;
    }

<div class="container"> 
<div class="table_container">
<table>
    <tr><th colspan="2">Cost</th></tr>
    <tr>
        <td class="header" rowspan="4">Your cost<br>
        
        </td>
    <td>Employee Only</td>
    <tr><td>Employee</td></tr>
    <tr><td>Employee</td></tr>
    <tr><td>Employee</td></tr>
    </tr>
        
</table>    

</div>

<div class="table_container">
<table id="plans">
    <tr><th>Saver</th></tr>
    <tr>
        <td>$32.90 <button>Select</button></td>
    </tr>
    <tr>
        <td>$11.30<button>Select</button></td>
    </tr>   
    <tr>
        <td>$53.30<button>Select</button></td>
    </tr>
    <tr>
        <td>$186.20<button>Select</button></td>
    </tr>
</table>    
    </div>

<div class="table_container">
    <table id="plans">
        <tr><th>Saver</th></tr>
        <tr>
            <td>$332.90 <button>Select</button></td>
        </tr>
        <tr>
            <td>$161.30<button>Select</button></td>
        </tr>   
        <tr>
            <td>$83.30<button>Select</button></td>
        </tr>
        <tr>
            <td>$126.20<button>Select</button></td>
        </tr>
    </table>    
</table>    
    </div>

<div class="table_container">
    <table id="plans">
        <tr><th>Saver</th></tr>
        <tr>
            <td>$33.90 <button>Select</button></td>
        </tr>
        <tr>
            <td>$161.30<button>Select</button></td>
        </tr>   
        <tr>
            <td>$53.30<button>Select</button></td>
        </tr>
        <tr>
            <td>$186.20<button>Select</button></td>
        </tr>
    </table>    
    </div>
</div>