How to add and remove field dynamically using JavaScript

 

HTML:

        

         <table class="table table-striped table-bordered  risk_factor_calculation ">
                                    <thead>
                                        <tr>
                                            <th colspan="12">
                                                <p style="font-size: 20px; font-weight: 600;">
                                                   Risk Factor Calculation
                                                </p>
                                            </th>
                                        </tr>
                                        <tr>
                                            <th>Loan taking tendency</th>
                                            <th>Loan return tendency</th>
                                            <th>Local purchase tendency</th>
                                            <th>Local payment tendency</th>
                                            <th>Loan risk factor</th>
                                            <th>Loan risk grade</th>
                                            <th>Risk Index</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                      <tbody>
                                        <tr>
                                            <td><input type="text" class="form-control"></td>
                                            <td><input type="text" class="form-control"></td>
                                            <td><input type="text" class="form-control"></td>
                                            <td><input type="text" class="form-control"></td>
                                            <td><input type="text" class="form-control"></td>
                                            <td><input type="text"  class="form-control"></td>
                                            <td><input type="text" class="form-control" ></td>
                                           <td class="text-right">
                                                <a class="btn btn-primary riskFactor">
                                                   <i class="fa fa-plus"></i>
                                              </a>
                                            </td>
                                        </tr>
                                    
                                    </tbody>
         </table>

JS:

        $(".riskFactor").on("click", function() {

         tbody.append('<tr>' +

             '<td><input type="text" class="form-control"></td>' +

            '<td><input type="text"  class="form-control"></td>' +

             '<td><input type="text" class="form-control"></td>' +

             '<td><input type="text" class="form-control"></td>' +

            '<td><input type="text" class="form-control"></td>' +

             '<td><input type="text"  class="form-control"></td>' +

             '<td><input type="text"  class="form-control"></td>' +

             '<td class="text-right"><button class="btn btn-danger removeFields"><i class="fa fa-minus"></i></button></td>' +

         '</tr>');

         });

        

         $('.risk_factor_calculation').on('click', '.removeFields', function () {

         $(this).parent().parent().remove();

         });