JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="new-category">
<button id="button">Test</button>

JavaScript

$(document).ready(function(){


$('#button').click(function(event) {

     event.preventDefault();


     $.ajax({
       url: '/categories',
       method: 'post',
       data: {
         category: { name: capitalizeFirstLetter($('#new-category').val()) }
       },
       success: function(category){
          // console.log(response);
          if(category.id != null){
            let newOption = $('<option/>')
            .attr('value', category.id)
            .attr('selected', true)
            .text(category.name)

            $('#category_select').append(newOption);
            $('#new-category').val('');
          }
       },
       error: function(xhr){
         let errors = xhr.responseJSON;
       }

     });
 });

})

function capitalizeFirstLetter(string) {
     string  = string.toLowerCase();
    return string.charAt(0).toUpperCase() + string.slice(1);
}