JSFiddle - React, Tailwind, and code Playground

HTML

<div id="product_name">
    <input id="skriv_produktnavn" placeholder="Skriv Produktnavn her" required="required"/>
    <button id="add_another_product_name">Tilføj endnu et produktnavn</button>
    <div id="additional_product_names">
        <div class="add_remove_product_name" style="display: none;">
            <input id="added_product_name" placeholder="Skriv Produktnavn her" required="required"/>
            <button class="remove_product_name">X</button>
        </div>
    </div>
</div>

JavaScript

$(function() {
    var MAX = 10;
        
    var $addBtn = $('#add_another_product_name'),
        $additionalContainer = $('#additional_product_names');
        $TEMPLATE = $additionalContainer.children(':first').remove();
    
    function update() {
        var $additonalDivs = $additionalContainer.children();

        // Enable/disable the add button.
        $addBtn.prop('disabled', $additonalDivs.length >= MAX);

        // Re-index the "id" attributes.
        $additonalDivs.find('input').attr('id', function(i) {
            return 'added_product_name[' + i + ']';
        });
    }
    
    $addBtn.click(function() {
        $TEMPLATE.clone().appendTo($additionalContainer).show();
        update();
    });
    
    $('#product_name').on('click', '.remove_product_name', function() {
        $(this).closest('.add_remove_product_name').remove();
        update();
    });
});