Materializecss добавляет несколько форм выбора

Попробуй это:

    $(document).ready(function(){
            var i = 1;
            $('#add').click(function(){
                i++;
                $('#product_field').append('<div class = "row"><div class = "input-field col s2"><select><option>Select 1</option><option>Select 2</option><option>Select 3</option><option>Select 4</option></select></div><div class = "input-field col s1 right"><button name = "remove" id = "'+i+'" class = "btn btn-danger btn_remove">-</button></div></div>');
                 $('select').trigger('contentChanged').formSelect();
            });

            $(document).on('click','.btn_remove', function(){
                var button_id = $(this).attr("id");
                $("#row"+button_id+"").remove();
            });


            $('select').formSelect();
              $('select').on('contentChanged', function() {
              $(this).formSelect();
        });
});

Просто удалите tr и td из вашей строки html, и вы забыли вызвать formSelect() после добавления нового выбора

Если вы хотите сохранить структуру html с этой модификацией, она вам подойдет.

$(document).ready(function(){
        var i = 1;
        $('#add').click(function(){
            i++;
            $('#product_field').append('<tr id = "row'+i+'"><td><div class = "row"><div class = "input-field col s2"><select><option>Select 1</option><option>Select 2</option><option>Select 3</option><option>Select 4</option></select></div><div class = "input-field col s1 right"><button name = "remove" id = "'+i+'" class = "btn btn-danger btn_remove">-</button></div></div></td></tr>');
             $("#row"+i+" select").formSelect();
        });

        $(document).on('click','.btn_remove', function(){
            var button_id = $(this).attr("id");
             $("#row"+button_id+"").remove();
        });


        $('select').formSelect();
    });

Единственное изменение заключалось в том, что когда я создавал новый «tr», в этот момент создавался новый экземпляр «formSelect».