如何在上面列表中的多个输入字段中显示输入的值

Question

我编写了一个代码来添加和删除输入字段。我的要求是在我们在上面列表中的每个输入字段中写入时显示数据。为此，我已经编写了一个代码，我从第一个输入字段获得输出，但无法从第一个输出o / p。 https://jsfiddle.net/89f4qzw9/

<script>
    $(document).ready(function(){
        $("#li1").hide();$("#li2").hide();$("#li3").hide();
        $("#li4").hide();$("#li5").hide();$("#li6").hide();
        $("#li7").hide();$("#li8").hide();$("#li9").hide();
        $("#li10").hide();$("#li11").hide();$("#li12").hide();
        $("#li13").hide();$("#li14").hide();$("#li15").hide();



        $('#h1').on('paste keyup change click mouseup focus mouseleave', function () {
            $("#h11").html($(this).val());
        });
        $('#h2').on('paste keyup', function () {
            $("#h22").html($(this).val()); 
        });

        $('#h3').on('paste keyup', function () {
            $("#h33").html($(this).val());
        });

        $('#h4').on('paste keyup', function () {
            $("#h44").html($(this).val());
        });

        $('#p_1').on('paste keyup', function () {
            $("#h_1").html($(this).val());
            $("#li1").show();
        });
        $('#p_2').on('paste keyup', function () { alert('ok');
            $("#h_2").html($(this).val());
            $("#li2").show();
        });
        $('#p_3').on('paste keyup', function () { alert('ok');
            $("#h_3").html($(this).val());
            $("#li3").show();
        });
        $('#p_4').on('paste keyup', function () { alert('ok');
            $("#h_4").html($(this).val());
            $("#li4").show();
        });
        $('#p_5').on('paste keyup', function () {
            $("#h_5").html($(this).val());
            $("#li5").show();
        });
        $('#p_6').on('paste keyup', function () {
            $("#h_6").html($(this).val());
            $("#li6").show();
        });
        $('#p_7').on('paste keyup', function () {
            $("#h_7").html($(this).val());
            $("#li7").show();
        });
        $('#p_8').on('paste keyup', function () {
            $("#h_8").html($(this).val());
            $("#li8").show();
        });
        $('#p_9').on('paste keyup', function () {
            $("#h_9").html($(this).val());
            $("#li9").show();
        });
        $('#p_10').on('paste keyup', function () {
            $("#h_10").html($(this).val());
            $("#li10").show();
        });
        $('#p_11').on('paste keyup', function () {
            $("#h_11").html($(this).val());
            $("#li11").show();

        });
        $('#p_12').on('paste keyup', function () {
            $("#h_12").html($(this).val());
            $("#li12").show();
        });
        $('#p_13').on('paste keyup', function () {
            $("#h_13").html($(this).val());
            $("#li13").show();
        });
        $('#p_14').on('paste keyup', function () {
            $("#h_14").html($(this).val());
            $("#li14").show();
        });
        $('#p_15').on('paste keyup', function () {
            $("#h_15").html($(this).val());
            $("#li15").show();
        });

    });

    $(document).ready(function(){
        var scntDiv = $('#item');
        var i = $('#item div').size() + 1;
        $("#add").click(function(){
            $("#item").append('<div><input type="text" name="features[]"  id="p_' + i +'" ><button class="delete">delete</button></div>');  
            i++;
            return false;
        });
        $('#item').on('click','.delete',function(){
            if( i > 2 ) {

                $(this).parent('div').remove();
                i--;
            }
            return false;
        });

    });

</script>          

<ul style="list-style-type:none">
    <li id="li1"><i class="fa fa-check-square"></i><span id='h_1'></span></li>
    <li id="li2"><i class="fa fa-check-square"></i><span id='h_2'></span></li>
    <li id="li3"><i class="fa fa-check-square"></i> <span id='h_3'></span></li>
    <li id="li4"><i class="fa fa-check-square"></i> <span id='h_4'></span></li>
    <li id="li5"><i class="fa fa-check-square"></i> <span id='h_5'></span></li>
    <li id="li6"><i class="fa fa-check-square"></i> <span id='h_6'></span></li>
    <li id="li7"><i class="fa fa-check-square"></i> <span id='h_7'></span></li>
    <li id="li8"><i class="fa fa-check-square"></i> <span id='h_8'></span></li>
    <li id="li9"><i class="fa fa-check-square"></i> <span id='h_9'></span></li>
    <li id="li10"><i class="fa fa-check-square"></i> <span id='h_10'></span></li>
    <li id="li11"><i class="fa fa-check-square"></i> <span id='h_11'></span></li>
    <li id="li12"><i class="fa fa-check-square"></i> <span id='h_12'></span></li>
    <li id="li13"><i class="fa fa-check-square"></i> <span id='h_13'></span></li>
    <li id="li14"><i class="fa fa-check-square"></i> <span id='h_14'></span></li>
    <li id="li15"><i class="fa fa-check-square"></i> <span id='h_15'></span></li>
</ul> 

<tr> 
    <td>Features</td>
    <td>
        <div id="item">
            <div>
                <input type="text"  id="p_1" name="features[]" > <span style="cursor:pointer" id="add">Add</span>
            </div>
        </div>
    </td>
</tr>

Answer 1

您应该将{{1}}用于将来会出现的元素。

更新了小提琴链接：

https://jsfiddle.net/89f4qzw9/1/