проблема в выполнении скрипта JQuery

Изучаю JS и уперся в проблему с JQuery, в скрипте есть несколько обработчиков событий и выполнятся только первый, остальные не работают. Два дня не могу понять в чем дело, решил просить помощи тут.

$(function(){
    $('#btn').click(function(){
        var headerTxt = $('#headerTxt').val();
        var taskTxt = $('#taskTxt').val();
        if(headerTxt !=='') {
            $('#leftColumn h3').hide()
            var head = $('<h4></h4>').text(headerTxt);
            $(head).append('<button class="rem">X</button>');
            $('#task').append(head);
            $('#headerTxt').val("");
            if(taskTxt !=='') {
                var task = $('<p></p>').text(taskTxt);
                $('#task').append(task);
                $('#taskTxt').val("");
            };
        };
        
    });

    $('.rem').on('click', function(){
        $(this).parent().next('p').remove();
        $(this).parent().remove();
            if ($('#task').text() == '') {
            $('#leftColumn h3').show();
            } else {
                $('#leftColumn h3').hide();
            }
        
    });

    $('#task h4').click(function(){
        $(this).next('p').slideToggle();
        
    });     
});