How to Show entered value in multiple input fields in list above

Question

I have written a code to add and remove input fields . where my requirement is to display data as we write in each input field in the list above . for this i have written a code , i am getting a output from first input field but unable to get the o/p apart from first . 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>

You should research the DRY principle. This code can be condensed to about 10 lines. — Rory McCrossan
– Rory McCrossan, Commented Oct 16, 2015 at 7:34

vijayP · Accepted Answer · 2015-10-16 07:54:05Z

1

You should use $(document).on('paste keyup','#p_2', function () {}) for elements which are going to be present in future.

Updated fiddle link:

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

answered Oct 16, 2015 at 7:54

vijayP

11.5k5 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raman Over a year ago

@ vijayP this is perfect soltion . thanks u saved a lot of time

Collectives™ on Stack Overflow

How to Show entered value in multiple input fields in list above

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related