simple jquery conditional response-to-comment form display

[co.ador]

I am looking to compare the data-commentid attribute process in javascript after user slideToglle function. I want to compare that value attribute in each interaction with $id variable within the php. if $id = commentid data attribute in the span tag then display the response. I am not sure whether to do the comparison in php or javascript. an example or idea is if(after slideToggle, write a response, submit the form with the response then compare $id == $idc) that would be the sequence. if $id == $idc then display the response and only then.

 

Any idea code I have so far is as below.

 

<?php 
$id = $_POST['id'];
$idc = $_POST ['replyCommentId'];

?>

<table width="100%" align="center" cellpadding="4" bgcolor="#CCCCCC" style="margin-bottom:0.5em">
       <tr>
          <td width="auto" height="auto" bgcolor="#EFEFEF" style="vertical-align:top"><a width="auto" height="auto" title="'.$row2["name"]   .' "href="profile.php?id='.$uid "></a><br />
          </td>
            
            <td width="93%" bgcolor="#EFEFEF"><a href="profile.php?id='.$uid.'">' . $ufirstname . ' </a>
•
                <span style="font-size:10px; font-weight:bold; color:#A6A6A6;">' . $message_date . '</span>
    <br />
          
                <p id="only"> hi how you doing today id=101</p>
                
                <span class="comment" data-commentid=<?php "'. $id .'" ?>>•<a style="padding-left:3.5px; color:#0099ff" href ="">Comment</a></span>
            <div class="commentForm">
              
               <form align="left" id="bring" action="profile.php?id='. $uid .'" method="post" enctype="multipart/form-data" name="message_from">
                
                 <textarea name="comment_field_2" type="text" id="text2" rows="3" style="width:100%; height:30px;"></textarea>
                 
                 <input id="bringinput" name="submit" type="button" value="submit" align="left" />
                  
                 <input type="button" name="replyCommentID" id="replyCommentId" value=""/>
               
              </form>
                
               </div>
  
           </td>

           </tr>

    </table> 

<br/>

<table width="100%" align="center" cellpadding="4" bgcolor="#CCCCCC" style="margin-bottom:0.5em">
       <tr>
          <td width="auto" height="auto" bgcolor="#EFEFEF" style="vertical-align:top"><a width="auto" height="auto" title="'.$row2["name"]   .' "href="profile.php?id='.$uid "></a><br />
          </td>
            
            <td width="93%" bgcolor="#EFEFEF"><a href="profile.php?id='.$uid.'">' . $ufirstname . ' </a>
•
                <span style="font-size:10px; font-weight:bold; color:#A6A6A6;">' . $message_date . '</span>
    <br />
          
                <p id="only"> hi how you doing today id=101</p>
                
                <span class="comment" data-commentid=<?php "'. $id .'" ?>>•<a style="padding-left:3.5px; color:#0099ff" href ="">Comment</a></span>
            <div class="commentForm">
              
               <form align="left" id="bring" action="profile.php?id='. $uid .'" method="post" enctype="multipart/form-data" name="message_from">
                
                 <textarea name="comment_field_2" type="text" id="text2" rows="3" style="width:100%; height:30px;"></textarea>
                 
                 <input id="bringinput" name="submit" type="button" value="submit" align="left" />
                  
                 <input type="button" name="replyCommentID" id="replyCommentId" value=""/>
               
              </form>
                
               </div>
  
           </td>

           </tr>

    </table> 


$(document).ready(function(){

  $(".commentForm").hide();

     $(".comment").bind('click', function(){

            var commentLink = $(this);

         $(this).nextAll(".commentForm").slideToggle(function(){

               $('#replyCommentId', $(this) .parent() .parent()).val(commentLink.data('commentid'));
      
               });

     return false;

    });
    
var html2 = $("#text2").html();

   $(".bringinput").click(function() {

        console.log("AJAX EVENT OCCURED")

          $.post($('#bring').attr("action"),

                $("#bring").serialize(),

          function(html2) {
  
               $(html2) .find('form + table').insertAfter('#blab').after('<br />');
     
             });

       });

});

 

jsfiddle

 

http://jsfiddle.net/xysxD/56/