UI Component form show dropdown or multiple text fields based on content

My suggestion is to take a look at the screen at Marketing/Cart Price Rules

Particularly, the section Manage Coupon Codes in this screen.

I would create a form to add an animal for your customer entry. This form would be a lot simpler that the form I show above and the generate button would become a button you may label 'register a new animal'

Then, finally, when the button register would be hit, the table used for coupon code would also need to be replicated. And this table would display the list of animals.

To render a table is not to complex. Here your challenge will be that your grid will need to read its data from various sources and potential will need to parse some json. Likely you will need to create a DataProvider and the latter will have the ability to parse the data and assign it to the ui component to render the grid data.

I appreciate this is vague answer at this stage. However, it is a big amount of work too and hopefully this solution may give you at least some sort of directions.

Good luck

I have written another solution and it seems more hopeful to work for you.

My solution consists in enabling the customer entity in Magento to be assigned some animals data. The data can be either some array ['dog', 'cat'] or just like you [{"species":"Horse","amount":"4"},{"species":"Cat","amount":"2"}]

then, I have added a tab section in my screen and within this tab, I have a table

Of course, what we want to describe is how to parse the data and finally how to enable the data to be maintained within this table.

first to my screen, I have added the section that will contain the table:

<fieldset name="assign_animals" sortOrder="40">
        <settings>
            <collapsible>true</collapsible>
            <label translate="true">Animals with Customer</label>
        </settings>
        <container name="assign_animals_container" sortOrder="160">
            <htmlContent name="html_content">
                <block name="gallery" class="Mbs\BackendScreen\Block\Adminhtml\CustomerAnimal\AssignAnimals"/>
            </htmlContent>
        </container>
    </fieldset>

then I have create the AssignAnimals block and that is this block that will centralise all the data interaction and parsing.

Just to give you the important mechanisms, this function retrieves all the possible animals in the system and assign the quantity info if the customer happens to own one of the animals.

/**
     * @return string
     */
    public function getAnimalsJson()
    {
        return $this->customerAnimalReader->getAllAnimalsInJson($this->getCustomer());
    }

then, finally, the javascript is what will update the post fields and will enable the data to be present in the controller so that the customer entity can be updated

/* global $, $H */

define([
    'mage/adminhtml/grid'
], function () {
    'use strict';

    return function (config) {
        var animalsInfo = config.animalsInfo,
            gridJsObject = window[config.gridJsObjectName],
            tabIndex = 1000;

        $('in_customer_animals').value = Object.toJSON(animalsInfo);

        /**
         * Register Category Product
         *
         * @param {Object} grid
         * @param {Object} element
         * @param {Boolean} checked
         */
        function registerCustomerAnimal(grid, element, checked) {
            $('in_customer_animals').value = Object.toJSON(animalsInfo);
        }

        /**
         * Change product amount
         *
         * @param {String} event
         */
        function amountChange(event) {
            var element = Event.element(event);

            if (element) {
                for (var i = 0; i < animalsInfo.length; i++) {
                    if (animalsInfo[i].species === element.animalObject.species) {
                        animalsInfo[i].amount = element.value;
                        break;
                    }
                }
                $('in_customer_animals').value = Object.toJSON(animalsInfo);
            }
        }

        /**
         * Initialize category product row
         *
         * @param {Object} grid
         * @param {String} row
         * @param {String} key
         */
        function customerAnimalRowInit(grid, row, key) {
            var amount = $(row).getElementsByClassName('input-text')[0];

            if (amount) {
                amount.animalObject = animalsInfo[key];
                amount.tabIndex = tabIndex++;
                Event.observe(amount, 'keyup', amountChange);
            }
        }

        gridJsObject.initRowCallback = customerAnimalRowInit;
        gridJsObject.checkboxCheckCallback = registerCustomerAnimal;

        if (gridJsObject.rows) {
            gridJsObject.rows.each(function (row, key) {
                customerAnimalRowInit(gridJsObject, row, key);
            });
        }
    };
});

I post a screenshot showing how the controller receives the table post data when the table data have changed.