如何实现表单输入实时预览

最近工作中需要给用户做一个引导界面，界面需要体现出用户随时可以看见自己输入后呈现出的效果。实时预览
经过查询资料，实现效果及代码如下：
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>

效果如下：