如何實現表單輸入實時預覽

最近工作中需要給用戶做一個引導界面，界面需要體現出用戶隨時可以看見自己輸入後呈現出的效果。實時預覽
經過查詢資料，實現效果及代碼如下：
html部分：

<div class="container">
       <div class="row w-100 justify-content-between">
            <div class="col-md-6">
                <label class="form-label text-dark mb-0 mt-2">目標</label>
                <input type="text" class="form-control goal" aria-describedby="input-group-example">
            </div>
            <div class="col-md-6">
                <label class="form-label text-dark mb-0 mt-2">目標</label>
                <p class="form-group text-info goal-view"></p>
            </div>
            <div class="col-md-6">
                <label class="form-label text-dark mb-0 mt-2">期望</label>
                <input type="text" class="form-control expect" aria-describedby="input-group-example">
            </div>
            <div class="col-md-6">
                <label class="form-label text-dark mb-0 mt-2">期望</label>
                <p class="form-group expect-view text-info"></p>
            </div>
        </div>
   </div>

js部分：

<script>
    $('.goal').keyup(function(){
        var gtext = $('.goal').val()
        $('.goal-view').html(gtext)
    });
    $('.expect').keyup(function(){
        var etext = $('.expect').val()
        $('.expect-view').html(etext)
    })
</script>

效果如下：