动态文本框未删除

I am adding textboxes through jquery and for one text box it is removing perfeclty but when I add two textboxes then it does now remove both.

this is jquery

<script>

$(document).ready(function($){
    $('.product-form .add-product').click(function(){
        var n = $('.text-product').length + 1;

        var product_html = $('<p class="text-product"><label for="product' + n + '">Name <span class="product-number">' + n + '</span></label> <input required type="text" name="productnames[]" value="" id="product' + n + '" /> <label for="productprice' + n + '">Price <span class="product-number">' + n + '</span></label> <input required type="text" name="productprices[]" value="" id="productprice' + n + '" /><a href="#" class="remove-product">Remove</a></p>');
        product_html.hide();
        $('.product-form p.text-product:last').after(product_html);
        product_html.fadeIn('slow');
        return false;
    });
    $('.product-form').on('click', '.remove-category', function(){
        $(this).parent().fadeOut("slow", function() {
            $(this).remove();
            $('.product-number').each(function(index){
                $(this).text( index + 1 );
            });
        });
        return false;
    });
});
</script>

and this is my html

<div>
        <form>

            <div class="product-form">
                <p class="text-product">
                    <label for="product1">Name <span class="product-number">1</span></label>
                    <input required type="text" name="productnames[]" value="" id="product1" />
                    <label for="product1">Price <span class="product-number">1</span></label>
                    <input required type="text" name="productprices[]" value="" id="product1" />
                    <div>
                        <a class="add-product" href="#">Add More</a>
                    </div>
                </p>
            </div>
            <div>
                <input type="submit" name="submitDetails" value="Finish"/>
            </div>

        </form>
    </div>

If only one textbox for instance productnames is added then it removal function works but when I add botch productnames and productprices textbox removal function does not remove both

Your code should read $('.product-form').on('click', '.remove-product', function() rather than 'click', '.remove-category'. Also, don't place the Add More div element inside the paragraph element. The numbering also breaks a bit, but you can figure that out.