JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-group col-lg-4">
            <label for="donationType">Donation Type: &nbsp;</label> <select
                id="donationType" style="text-transform: capitalize"
                name="volunteerProject.donationTypeId" class="form-control">
                <option value='0'>Select Donation Type</option>
                <option value='1'>1</option>
                <option value='2'>2</option>
                <option value='3'>3</option>
                <s:iterator value="donationTypeList">
                    <option value='<s:property value="donationTypeId" />'
                        name='<s:property value="donationType" />'>
                        <s:property value="donationType" />
                    </option>
                </s:iterator>
            </select>
        </div>
        
          <div class="form-group col-lg-3" id="vpDonateButtonLabelDiv">
            <label for="vpTitle">Button Label</label> <input
            type="text" class="form-control" id="vpDonateButtonLabel"
            name="volunteerProject.donateButtonLabel"
            placeholder="Enter button label" maxlength="50" required />
        </div>

JavaScript

$('#donationType').change( function() {

var donationType = $(this).val();

    if (donationType != 0) {
        if (donationType == 1){
            $("#vpDonateButtonLabel").val('Donate');
        } else if (donationType == 2) {
            $("#vpDonateButtonLabel").val('Volunteer');
        } else if (donationType == 3) {
            $("#vpDonateButtonLabel").val('Share');
        } else if (donationType == 5) {
            $("#vpDonateButtonLabel").val('Tweet');
        }
    } else {
        $("#vpDonateButtonLabel").val('');
    }
});