JSFiddle - React, Tailwind, and code Playground

HTML

<form method="POST">
    <input type="text" name="name" id="name" value="foo" size=35 />
        <input type="text" name="category" id="category" value="bar" size=20 />
            <input type="text" name="brand" id="brand" value="foobar" size=10 />
<div class="submitButton">
    <input type="button" name="submitButton" value="Add" />
</div>
</form>

<form method="POST">
<input type="text" name="name" id="name" value="foo" size=35 />
<input type="text" name="category" id="category" value="bar" size=20 />
<input type="text" name="brand" id="brand" value="foobar" size=10 />
<div class="submitButton">
<input type="button" name="submitButton" value="Add" />
</div>
</form>

<form method="POST">
<input type="text" name="name" id="name" value="foo" size=35 />
<input type="text" name="category" id="category" value="bar" size=20 />
<input type="text" name="brand" id="brand" value="foobar" size=10 />
<div class="submitButton">
<input type="button" name="submitButton" value="Add" />
</div>
</form>

JavaScript

$('form').click(function(e){
               
                if($(e.target).is('input[type=button]', this)){
                    var name = $('#name', this).val();
                    var category = $("#category", this).val();
                    var brand = $("#brand", this).val();

                    $('input[type=button]', this).val(name+category+brand);
                }
                
            });