JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div ng-app='myApp' class="Freight">
        <div ng-controller="MainCtrl">
            <div>
                <ul>
                    <li ng-repeat="prdElement in palletElement">
                        <span>
                            <input type="text" ng-model="prdElement.name" placeholder="Name" required />
                        </span>

                        <ul>
                            <li ng-repeat="elemnt in prdElement.product">
                                <div class="prd-box">
                                    <span>
                                        <input type="text" ng-model="elemnt.Code" placeholder=" Code" required />
                                    </span>
                                    <span>
                                        <input type="text" ng-model="elemnt.name" placeholder=" Description" required />
                                    </span>
                                    <span>
                                        <input type="text" ng-model="elemnt.class" placeholder=" Class" required />
                                    </span>
                                    <span>
                                        <input type="text" ng-model="elemnt.quantity" placeholder=" Quantity" required />
                                    </span>
                                    <span>
                                        <input type="text" ng-model="elemnt.weight" placeholder=" Weight" required />
                                    </span>
                                    <span ng-hide="elemnt.length == 1">
                                        <a href="#" ng-click="prdElement.product.splice($index, 1)">Remove Item</a>
                                    </span>

                                </div>
                            </li>
                            <li>
                                <a href="#" ng-click="newPrdItem(prdElement,$event)">Add Item</a>

                ...

JavaScript

(function () {
    angular.module('myApp', []).controller('MainCtrl', function ($scope) {
      
        var counter = 0;

        $scope.palletElement = [{
            name: 'Pallet 1',
            product: [{
                name: '11',
                code: '23',
                description: 'desc',
                class: 'class',
                quantity: 'quantity',
                weight: 'weight'

            }, {
                name: '11',
                code: '23',
                description: 'desc',
                class: 'class',
                quantity: 'quantity',
                weight: 'weight'
            }]
        }, {
            name: 'Pallet 2',
            product: [{
                name: '11',
                code: '23',
                description: 'desc',
                class: 'class',
                quantity: 'quantity',
                weight: 'weight'
            }, {
                name: '11',
                code: '23',
                description: 'desc',
                class: 'class',
                quantity: 'quantity',
                weight: 'weight'
            }]
        }]

        $scope.newPrdItem = function (prdElement, $event) {
            counter++;
            prdElement.product.push({
                id: '',
                code: '',
                description: '',
                class: '',
                quantity: '',
                weight: ''
            });
            $event.preventDefault();
        }

        $scope.newPalletItem = function (palletElement, $event) {
            counter++;
            palletElement.push({
                name: '',
                product: [{
                    name: '',
                    code: '',
                    description: '',
                    class: '',
                    quantity: '',
                    weight: ''

                }]
            });
            $event.preventDefault();
        }




        $scope.packageElement = [{
           ...