lemon-admin/resources/views/app/my-account/settings/update-name.blade.php

<div moe>
    <a href="" start show class="btn btn-outline-pry py-1 mb-sm-0 mb-3 text-sm text-nowrap" style="width:200px">Change name</a>
    <form id="nameForm" url="/api/customerStore/updateName">
        <input type="hidden" name="uid" value="{{$performer->user->uid}}">
        <h5>Update Name</h5>
        <hr>
        <div class="row">
          <div class="col-lg-6 mb-3">
            <label for="" class="control-label">First Name</label>
            <input type="text" class="form-control" name="nameFirst" value="{{$performer->user->name_first}}">
          </div>
          <div class="col-lg-6 mb-3">
            <label for="" class="control-label">Last Name</label>
            <input type="text" class="form-control" name="nameLast" value="{{$performer->user->name_last}}">
          </div>
        </div>
        <div class="mb-3">
            <label for="" class="control-label">How would you like your name to appear?</label>
            <input type="text" class="form-control" name="fullName" value="{{$performer->user->full_name}}">
        </div>
        <div class="d-flex align-items-center w-100">
            <button cancel class="btn w-100 me-2 btn-outline-dark py-2">Cancel</button>
            <button submit class="btn w-100 ms-2 btn-pry py-2">Submit</button>
        </div>
    </form>
</div>

<script>
  $(document).ready(function(){
    var form = $('#nameForm');
    var nameFirstInput = form.find('[name=nameFirst]');
    var nameLastInput = form.find('[name=nameLast]');
    var fullNameInput = form.find('[name=fullName]');

    var __updateFullName = function (){
      var fullName = nameFirstInput.val() + ' ' + nameLastInput.val();
      fullNameInput.val(fullName);
    };
    form.find('[name=nameFirst], [name=nameLast]').on('change', function(){
      __updateFullName();
    });
  });
</script>