JSFiddle - React, Tailwind, and code Playground

by tchalvakspam

HTML

<script>

                      </script>
                      
                      
                      <table>
                      <tr id='prices'>
                        <td><input id='first-price-template' required name="PriceRetail" type="number" min=0 max=9999 id="PriceRetail" style="text-align:right" value="" size="10" maxlength="7" tabindex="11"></td>
                        <td><input required name="PriceHold"   type="number" id="PriceHold"   style="text-align:right" value=""   size="10" maxlength="7" tabindex="12"></td>
                        <td><input required name="PriceSell"   type="number" id="PriceSell"   style="text-align:right" value=""   size="10" maxlength="7" tabindex="13"></td>
                        <td><input required name="Cost"        type="number" id="Cost"        style="text-align:right" value=""        size="10" maxlength="7" tabindex="14"></td>
                      </tr>
    </table>
<div>
<input type='search'>
</div>

JavaScript

$(document).ready(function(){
                           
                              
                              $('#prices input').not($('#first-price-template')).css({'color':'red'});
                               // make the later prices match the retail price if they're blank.
                               $('#first-price-template').blur(function(){
                                   var original = $(this);
                                   var first_value = original.val();
                                   console.log(original, first_value);
                                   var matches = $('#prices input').not(original);
                                  console.log('matches', matches, $('#prices input'));
                                   $('#prices input').not(original)
                                   .val($(this), function(index, first_value){
                                       $(index).css({'color':'red','background-color':'blue'});
                                   
                                       console.log(first_value, index);
                                       if($(index).val()){
                                           return $(index).val();
                                       } else {
                                           console.log($(first_value));
                                           return $(first_value).val();
                                       }
                                   });
                               });
                           });