$(document).ready(function() {
    $('#dynamic-table').on('click', '.delete-row', function() {
        $(this).closest('tr').remove();
    });

    $('#dynamic-table').on('click', '.add-row', function() {
        var newRow = '<tr><td><button class="delete-row">Delete</button></td>';
        for (var i = 0; i < 5; i++) {
            newRow += '<td contenteditable="true"></td>';
        }
        newRow += '<td><button class="add-row">Add</button></td></tr>';
        $(this).closest('tr').after(newRow);
    });

    $(document).ready(function(){
        $('td').focus(function(){
        $('td').removeClass();       
        $(this).toggleClass('focus');
    });
});

    $('#dynamic-table').on('focus', 'td[contenteditable="true"]', function() {
        var filled = true;
        $(this).closest('tr').find('td[contenteditable="true"]').each(function() {
            if ($(this).text().trim() === '' || $(this).hasClass("focus")) {
                filled = false;
                return false;
            }
        });
        if (filled) {
            $(this).closest('tr').find('td[contenteditable="true"]').prop('contenteditable', false);
        }
    });
});