Question

I have some codes like this. Result 1 works fine, but result 2 displays the input from result 1.

Can someone please help me out?

JS:

$(document).ready(function(){
    exampleResult1();   
    function exampleResult1() {
        $(".exampleResult1 .result").text(
            '<div>' + $(".content").val() + '</div>'
        )
    }
    $(".exampleResult1 input").keyup(exampleResult1);


    exampleResult2();   
    function exampleResult2() {
        $(".exampleResult2 .result").text(
            '<div>' + $(".content").val() + '</div>'
        )
    }
    $(".exampleResult2 input").keyup(exampleResult2);

})

HTML:

<div class="exampleResult1">
    <p><input type="text" class="content"></p>
    Code: 
    <div class="code">
        <code><div class="result"></div></code>
    </div>
</div>

<div class="exampleResult2">
    <p><input type="text" class="content"></p>
    Code: 
    <div class="code">
        <code><div class="result"></div></code>
    </div>
</div>

Answer 1

Use Below Code :

 $(document).ready(function(){
    $('.exampleResult2 .content').keyup(function ()
    {
        $('.exampleResult1 .result').text($('.exampleResult1 .content').val());
    });

    $('.exampleResult2 .content').keyup(function ()
    {
        $('.exampleResult2 .result').text($('.exampleResult2 .content').val());
    });
 })

UPDATED

This is live Preview