JSFiddle - React, Tailwind, and code Playground

by Rafa Ola

HTML

<form id="addcost_form" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" accept-charset="UTF-8">
    <p>Please fill all the mandatory (*) fields.</p>
    <div class="question">
        <input type="text" id="delivery_cost" name="delivery_cost" pattern="(?=.)^\£?(([1-9][0-9]{0,2}(,[0-9]{3})*)|[0-9]+)?(\.[0-9]{1,2})?$" title="Vehicle Delivery Cost is required" required/>
        <label><font color='red'>Delivery Cost(*):</font>

        </label>
    </div>
    <div class="question">
        <input type="text" id="mot" name="mot" pattern='/^[0-9]+(\.[0-9]{2})?$/' />
        <label><font color='red'>MOT:</font>

        </label>
    </div>
    <div class="question">
        <input type="text" id="valet" name="valet" title="Vehicle Valet Cost is required" pattern="(?=.)^\£?(([1-9][0-9]{0,2}(,[0-9]{3})*)|[0-9]+)?(\.[0-9]{1,2})?$" required/>
        <label><font color='red'>Valet(*):</font>

        </label>
    </div>
    <div class="question">
        <input type="text" id="paint" name="paint" pattern="(?=.)^\£?(([1-9][0-9]{0,2}(,[0-9]{3})*)|[0-9]+)?(\.[0-9]{1,2})?$" />
        <label><font color='red'>Paint:</font>

        </label>
    </div>
    <div class="question">
        <input type="text" id="mechanical" name="mechanical" pattern="(?=.)^\£?(([1-9][0-9]{0,2}(,[0-9]{3})*)|[0-9]+)?(\.[0-9]{1,2})?$" />
        <label><font color='red'>Mechanical:</font>

        </label>
    </div>
    <div class="question">
        <input type="text" id="parts" name="parts" pattern="(?=.)^\£?(([1-9][0-9]{0,2}(,[0-9]{3})*)|[0-9]+)?(\.[0-9]{1,2})?$" />
        <label><font color='red'>Parts:</font>

        </label>
    </div>
    <div class="question">
        <input type="text" id="misc" name="misc" pattern="(?=.)^\£?(([1-9][0-9]{0,2}(,[0-9]{3})*)|[0-9]+)?(\.[0-9]{1,2})?$" />
        <label><font color='red'>Miscellaneous:</font>

        </label>
    </div>
    <div class="question">
        <input type="text" id="work_cost" name="work_cost"...

JavaScript

$('#delivery_cost, #mot, #valet, #paint', '#mechanical','#parts', '#misc').bind('keypress blur', function() {
        
    $('#work_cost').val($('#delivery_cost').val() + ' ' +
                             $('#mot').val() + ', ' +
                             $('#valet').val() + ' ' +
                             $('#paint').val() );
});