JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<table id="ratecardlist">
    <tr>
        <th> Show Time</th>
        <th> Balcony </th>
        <th> Box </th>
    </tr>
   <tr>
       <td>10.30AM</td>           
       <td><input type="text" id="plumz" name="bal:1:3" value="100" /> </td>
       <td><input type="text" id="plumz" name="box:1:5" value="200" /> </td>
       <td><a href="#" id="applyToAll" onClick="applyToAll(this);">Apply To All</a></td>
   </tr>
   <tr>
       <td>1.30PM</td>           
       <td><input type="text" id="joe" name="bal:3:3" value="400" /> </td>
       <td><input type="text" id="joe" name="box:3:5" value="450"/> </td>
       <td>&nbsp;</td>
   </tr>
  <tr>
       <td>6.30PM</td>           
       <td><input type="text" name="bal:5:3" value="600" /> </td>
       <td><input type="text" name="box:5:5" value="600" /> </td>
       <td>&nbsp;</td>
   </tr>
</table>

JavaScript

function applyToAll(element)
{
    // Build an array with the values of this row, in document order.
    var $row = $(element).closest("tr");
    var values = $row.find("#plumz").map(function() {
        return $(this).val();
    }).get();

    // Apply the values to the other rows.
    $row.nextAll().each(function() {
        $(this).find("#joe").each(function(index) {
            $(this).val(values[index]);
        });
    });
}