I'm doing something similar using the below Javascript:

// Allocate Blocked Tickets Section Populate Table Rows
const updateTable1Rows = async (tableFieldId, rowCount) => {
  const currentTable1FieldValues = LFForm.getFieldValues(tableFieldId);
  const curRowCount1 = currentTable1FieldValues.length;

  if (curRowCount1 < rowCount) {
    await LFForm.addRow(tableFieldId, rowCount - curRowCount1);
  } else if (curRowCount1 > rowCount) {
    await LFForm.deleteRow(
      tableFieldId,
      ...Array.from(Array(curRowCount1 - rowCount)).map(
        (_, i) => curRowCount1 - i - 1
      )
    );
  }
};

let lastFieldValue1 = null;

LFForm.onFieldChange(
  async () => {
    const fieldValues1 = LFForm.getFieldValues({ fieldId: 56 });

    // Check if the field value has changed since the last time a row was added
    if (fieldValues1[0] !== lastFieldValue1) {
      // Update the table rows with the new row count
      await updateTable1Rows({ variableName: 'FT_Allocate_Passengers' }, fieldValues1);
      lastFieldValue1 = fieldValues1; // Update the last field value
    }
  },
  { fieldId: 56 }
);

I bolded the variables/id's you'll have to update - Hope this helps!

Editing to add:

This CSS will hide the add/remove row buttons:

.table-row-add, .table-row-remove {display: none;}