jQuery addClass example

Change class name on click in jQuery

HTML

<select class="form-control" name="noa" id="id_noa">
                                    <option value="0">- Select -</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                                
          <table class="table table-bordered text-center housing-tbl plotTable">
            <thead class="thead-light">
                <tr class="noa_header" style="display:none;">
                    <th scope="col"></th>
                    <th scope="col">One</th>
                    <th scope="col">Two</th>
                    <th scope="col">Three</th>
                </tr>
            </thead>
            <tbody id="noa">
                <tr class="noa_header" style="display:none;">
                    <td>&nbsp;</td>
                    
                    </tr>
                    <tr>
                    <td>Row 0</td>
                    <td>
                        <input type="checkbox" name="" class="form-check-input chb" />
                        </td>
                        <td>
                        <input type="checkbox" name="" class="form-check-input chb" />
                    </td>
                    </tr>
                </tr>
            </tbody>
        </table>

JavaScript

// find elements
    var row_i = 0;

    function emptyRow() {
        row_i++;
        this.obj = $("<tr class='test1'></tr>");
        this.obj.append('<td>Row ' + row_i + '</td>');
        this.obj.append('<td><input type="checkbox" class="form-check-input" /></td>');
        this.obj.append('<td><input type="checkbox" class="form-check-input chb" /></td>');
        this.obj.append('<td><input type="checkbox" class="form-check-input chb" /></td>');
    }


    function refresh(new_count) {
        console.log("New count = " + new_count);
        if ((new_count > 0) && (new_count != 11)) {
            $(".noa_header").show();
            $("tbody#noa").show();
        } else {
            $(".noa_header").hide();
            $("tbody#noa").hide();
        }
        var old_count = ($('tbody#noa tr.test1').length);
        console.log("Old count = " + old_count);
        var rows_difference = parseInt(new_count) - old_count;
        console.log("Rows diff = " + rows_difference);
        if (rows_difference > 0) {
            for (var i = 0; i < rows_difference; i++)
                $('tbody#noa ').append((new emptyRow()).obj);
        } else if (rows_difference < 0) //if we need to remove rows...
        {
            var index_start = old_count + rows_difference - 1;
            console.log("Index start= " + index_start);
            if (index_start == -1) {
                $('.housing-tbl tr.test1').remove();
            } else {
                $('.housing-tbl tr.test1:gt(' + index_start + ')').remove();
            }
            row_i += rows_difference
        }
    }

    $(document).ready(function () {
        $('#id_noa').change(function () {
            refresh($(this).val());
            console.log("test1")
        });
        $(".chb").change(function () {
            $(".chb").prop('checked', false);
            $(this).prop('checked', true);
            console.log("test3")
        });
    });