Adding new input using Jquery breaks tooltips

I'm writing a form and I have to let the user add as many rows as required. As you can see, my inputs are treated as arrays to later save the data to the DB. (That will be another new thing to me)

$(document).ready(function() {
        var maxField = 10; //Input fields increment limitation
        var addButton = $('.add_button'); //Add button selector
        var wrapper = $('.field_wrapper'); //Input field wrapper
        var fieldHTML = '<tr> <td><input type="text" id="NombreProyecto" name="NombreProyecto[]"></td> <td><input type="text" id="Descripcion" name="Descripcion[]"></td> <td><input type="text" id="AplicacionesProyecto" name="AplicacionesProyecto[]"></td> <td style="width: auto"> <div class="range-field "> <input type="range"  name="NivelTRL[]" min="1" value="1" max="9" /> </div> </td> </tr>'; //New input field html 
        var x = 1; //Initial field counter is 1
        //Once add button is clicked
        $(addButton).click(function() {
            //Check maximum number of input fields
            if (x < maxField) {
                x++; //Increment field counter
                $(wrapper).append(fieldHTML); //Add field html
            }
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>
    <body>
        <div class="step-content">
            <div class="container">
                <div id="table" class="table-editable ">
                    <table class="table field_wrapper">
                        <tr>
                            <th>Nombre</th>
                            <th>Descripción</th>
                            <th>Aplicaciones</th>
                            <th>Nivel TRL</th>
                            <th><a href="javascript:void(0);" class="add_button tooltipped" data-position="right" data-tooltip="Add new row"><i class="material-icons">add</i></a>
                            </th>
                        </tr>
                        <tr class="">
                            <td><input type="text" id="NombreProyecto" name="NombreProyecto[]"></td>
                            <td><input type="text" id="Descripcion" name="Descripcion[]"></td>
                            <td><input type="text" id="AplicacionesProyecto" name="AplicacionesProyecto[]"></td>
                            <td>
                                <div class="range-field">
                                    <input type="range" name="NivelTRL[]" min="1" value="1" max="9" />
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </body>
    </html>

Everything looks perfect but when the user adds a new row and interacts with the range input, this won't feedback the user about the value he/she is picking. Just the original one will have the tooltip.

After some testing, it even affects the 'tooltipped' class used to, well, show tooltips over any element.

This is the codepen, It's all ready to show you the problem

How to reproduce it:

In the codepen provided, you will see the blue cross, when you click on it a new row will be added.

Play around with the first range input, it will show you the value on the tooltip.

In the later added range input, it wont.

Thank you for reading, have a nice day.

Solution

You should reinit your range elements.

Simply add this code

M.Range.init($('input[type=range]'));

after this

$(wrapper).append(fieldHTML); //Add field html