how to open only one field

Question

I’m having the following problem when asking jquery to open the form it ends up opening all at once to send a reply in the comment, but I need it to open only what clickei as I do it. Follow the code.

javascript

$(document).ready(function(){

    $('.resposta').click(function(){
       var id = $(this).children('input').val();
       var resposta = $('.restposta').id;

    $('.resposta').fadeOut("fast");
    $('.resp').fadeIn("fast");

    });
    return false;
});

Php that takes the database data

 <?php 
                   /*
                 **********************************************
                 **********************************************
                 ***********Função para exibição dos***********
                 ****************comentarios*******************
                 **********************************************/

                    $comentar = new Read;
              $comentar ->ExeRead('coment', 'WHERE video = :video ORDER BY id DESC LIMIT 4', "video={$sei[1]}");
              foreach ($comentar->getResult() as $big):
                  extract($big);
              $image = new Read;
              $image ->ExeRead('users', 'WHERE id = :id', "id={$big['user']}");
              foreach ($image->getResult() as $imx)
                  extract ($imx);
            /*
                 **********************************************
                 **********************************************
                 *********Fim da função de exibição************
                 ***************de comentarios*****************
                 **********************************************/
              echo "<input type='text' hidden='hidden' value='{$link}' id='link'>";
              ?><div class='comentar  fl-left'><div class='coment com' >

                            <?php 

                if($foto == "" || $foto == "uploads/"):
                    echo  "<a href='user?id={$id}'><img class='fl-left' src='".REQUIRE_PATH."/css/boot/icons/thumb.png'></a>";
                else:
                    echo  "<a href='user?id={$id}'><img class='fl-left' src='{$imx['foto']}'></a>";
                endif;
                   echo "<p><small class='fontze1'>Comentado por:</small> {$nome} <small>Em:  </small> {$date} <small>As: </small> {$hora}</p>

                            <p>".nl2br($comentario)."</p><div class='btn btn-green fl-right resposta'>Responder <input type='hidden' value='$big[id]' name='idcoment'></div><div class=' resp' style='display:none'><form method='post'>
                            <textarea></textarea> <input class='btn btn-green' type='submit' value='responder' name='responder'>
                             </form></div></div>";


                endforeach;    

                endforeach;

                endforeach; 

Edit: I also noticed that when clicking on show more those that appear on the page do not work the response function does not open anything and was to be opening when clicked it does not perform any action

Answer 1

You must use the this, will not apply for all resposta, the same way you were able to do in the variables.

$(document).ready(function(){

    $('.resposta').on('click', function(){

       var id = $(this).children('input').val();
       var resposta = $('.resposta').id;

       $(this).fadeOut('fast');
       $(this).parents('.coment').find('.resp').fadeIn('fast');

    });

});

If possible add the rendered HTML, this will be much less difficult, for the DOM it is not necessary to inform PHP, just as the HTML is. Your HTML is like this in my view:

<input type='text' hidden='hidden' value='{$link}' id='link'>
<div class='comentar  fl-left'>
  <div class='coment com'>
    <a href='user?id={$id}'><img class='fl-left' src='".REQUIRE_PATH."/css/boot/icons/thumb.png'></a>
    <p><small class='fontze1'>Comentado por:</small> {$nome} <small>Em:  </small> {$date} <small>As: </small> {$hora}</p>
    <p>".nl2br($comentario)."</p>
    <div class='btn btn-green fl-right resposta'>Responder <input type='hidden' value='$big[id]' name='idcoment'></div>
    <div class=' resp' style='display:none'>
      <form method='post'>
        <textarea></textarea> <input class='btn btn-green' type='submit' value='responder' name='responder'>
      </form>
    </div>
  </div>

_{There is a div that is not closed!}

---

Explanations:

You have a .resposta, that being clicked causes the .resp is shown and that the .resposta be removed.

What the .resposta and the .resp have in common (besides the name)? Simple, both belong to the .coment, so you have two ways to do this:

• $(this).parents('.coment').find('.resp'); finds the relative of the this classy coment (which is common to both) and finds the element with class of resp.

• $(this).siblings('.resp'); takes the class element resp which is at the same level as this.

Both achieve the same goal, remembering that the $(this) is the element clicked, IN THIS CASE.

---

Demonstration:

$(document).ready(function() {

  $('.resposta').on('click', function() {

    var id = $(this).children('input').val();
    var resposta = $('.resposta').id;

    $(this).fadeOut('fast');
    $(this).siblings('.resp').fadeIn('fast');

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='comentar  fl-left'>
  <div class='coment com'>
    <a href='user?id={id}'><img class='fl-left' src=''></a>
    <p><small class='fontze1'>Comentado por:</small> {nome} <small>Em:  </small> {date} <small>As: </small> {hora}</p>
    <p>{comentario}</p>
    <div class='btn btn-green fl-right resposta'><b>Responder</b><input type='hidden' value='{id}' name='idcoment'></div>
    <div class=' resp' style='display:none'>
      <form method='post'>
        <textarea></textarea> <input class='btn btn-green' type='submit' value='responder' name='responder'>
      </form>
    </div>
  </div>
</div>
<div class='comentar  fl-left'>
  <div class='coment com'>
    <a href='user?id={id}'><img class='fl-left' src=''></a>
    <p><small class='fontze1'>Comentado por:</small> {nome} <small>Em:  </small> {date} <small>As: </small> {hora}</p>
    <p>{comentario}</p>
    <div class='btn btn-green fl-right resposta'><b>Responder</b><input type='hidden' value='{id}' name='idcoment'></div>
    <div class=' resp' style='display:none'>
      <form method='post'>
        <textarea></textarea> <input class='btn btn-green' type='submit' value='responder' name='responder'>
      </form>
    </div>
  </div>
</div>