Show textarea corresponding to href

You have multiple divs with class ".responses", and you are creating an eventListener for all elements with class ".rests", so whenever you click on any of these divs, the function will be executed.

And what its function does is to get all the elements with the class ".res" and give a .show () in them, that is, all its textarea, since all have this class.

So they all pop up whenever you click on any of them.

I would suggest you do something like this:

$(document).ready(function() {

$.ajax({
    type:'post',        
    dataType:'json',    
    url: 'listAllForum',
    success: function(dados){
        for(var i = 0; dados.length > i; i++){
            var newElement = $('<div class="respostas" data-respostaId=' + dados[i].idForum + '>' +
                '<textarea rows=6 cols=95 class="res" value="" name="dados" style="display:none;"/> <br>' +
                '<a href="#" id="resp" class="resposta">Responder</a>' +
            '</div> <br> <br>');

            newElement.on('click', function (event) {
                var idPergunta = $(this).attr('data-respostaId');
                $(this).find('.res').show();
                $.ajax({
                    type:'post',
                    dataType:'json',
                    url:'saveAnswer',
                    success: function(resposta){

                    }
                });
                event.preventDefault();
            });

            $('#post-forum').append('<div>' + dados[i].idForum + ' - ' + dados[i].message + '</div>', newElement);


        }
    }
});
});

What I'm doing in this code is to create a new jQuery object inside the for, containing the code of the ".respuestas" div being created, and using that element to create a specific click eventListener for it. So when each ".respuestas" div is clicked, it will only call its corresponding function.

And within the listener function, I use jQuery's .find () method to fetch only the descendants of that element from the ".res" class, and give it a .show () in it. So just the right textarea will appear.

You are calling the show () in the ".res" class, which causes all textareas with this class to be displayed.

Try this:

<script>
$(document).ready(function() {

    $.ajax({
        type:'post',        
        dataType:'json',    
        url: 'listAllForum',
        success: function(dados){
            for(var i = 0; dados.length > i; i++){
                $('#post-forum').append('<div>' + dados[i].idForum + ' - ' + dados[i].message + '</div>' +
                    '<div class="respostas" data-respostaId=' + dados[i].idForum + '>' +
                        '<textarea rows=6 cols=95 class="res-'+ dados[i].idForum +'" value="" name="dados" style="display:none;"/> <br>' +
                        '<a href="#" id="resp" class="resposta">Responder</a>' +
                    '</div> <br> <br>');


            }
        }
    });

    $(document).on('click', '.respostas', function (event) {
        var idPergunta = $(this).attr('data-respostaId');
        $('.res-'+ idPergunta).show();
        $.ajax({
            type:'post',
            dataType:'json',
            url:'saveAnswer',
            success: function(resposta){

            }
        });
        event.preventDefault();
    });
});

I added the "data [i] .idForum" next to the class, so in the show you can individually differentiate each textarea.