JSFiddle - React, Tailwind, and code Playground

HTML

<table id="myTable">
    <thead>
        <tr>
            <th>Column One</th>
            <th>Column Two</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
        <th colspan="2">
            <input type="text" width="50" id="category" />
            <input type="button" value="Add Row" id="addRow" />
        </th>
    </tfoot>
</table>

JavaScript

// Your $F function (presumably)
$F = function(field){
    return $(field).val();
}

// Plugin Code (maybe name it jquery-addCategory.js and include it?)
;(function($){

  var catCounter = 0;
  $.fn.extend({
    addCategory: function(catId){
      if (!catId) var catId = $F('category'); // assume $F is a form element value?
      
      // use return so we can continue chaining
      return this.each(function(){
        var rowId = 'showcategory'+catCounter;
        
        // I assume catoption[N] is an element with that ID attribute
        // thus my use of '#' prefix for jQuery
        var cell1 = $('<td>').append($('#catoption'+catId).text());
        var cell2 = $('<td>')
          .append($('<input>').attr({
            'type':'hidden',
            'name':'categories[]',
            'value':catId
          })).append($('<input>').attr({
            'type':'button',
            'value':'Remove',
          }).click(function(){
            $(this).closest('tr').remove();
          }));
        
        // build the row from the cells above and append it
        var row = $('<tr>').append(cell1).append(cell2);
        $(this).append(row);
        
        // increase your counter
        catCounter++;
      });
    }
  });

})(jQuery);

// the code that goes in your document
$(function(){
    $('#addRow').click(function(){
        $('#myTable').addCategory($('#category').val());
    });
});