How to put click event on multi input of a same class

Question

    <script type="application/javascript">

    $(document).ready(function() {  
        $('input#newcommentinput').click(function() {
            $(this).hide();
            $(this).parent('.commentplaceofnewmodernpost').children('.newcommenttableinnewmodernpost').show();
            $('.textreaofnewcommentinnewmodernpost').focus(); 
        });
        $("input.postnewcomment").click(function() {
                var message=$(this).parent('.newcommenttableinnewmodernpost').children('.textreaofnewcommentinnewmodernpost').val();
                var post_id=$('.textreaofnewcommentinnewmodernpost').attr('id');
                alert(message);
                    if(message.length > 0){
                        $.post("PAGE_TO_POST", {comment:""+message+"",post_id:""+post_id+""}, function(data){
                            if(data.length >0) {
                                $('#newcommenthere').append(data);
                                $('table.newcommenttableinnewmodernpost').hide();
                                $('input.inputofnewcommentinnewmodernpost').show();
                                $('textarea.textreaofnewcommentinnewmodernpost').val('');
                                $('input.inputofnewcommentinnewmodernpost').val('Click to post comment...');
                            }
                        });}
        });

    });
</script>   

        <div class="commentplaceofnewmodernpost">
            <input class="inputofnewcommentinnewmodernpost watermarkpostcomment" id="newcommentinput">
            <table class="newcommenttableinnewmodernpost">
                <tr>
                    <td class="imgtdofnewcommenttable">
                        <img src=" IMG_ SRC" class="imgofdisplaycomment">
                    </td>
                    <td style="vertical-align:top;">
                        <textarea class="textreaofnewcommentinnewmodernpost watermarkpostcomment newcommenttextareaexpand" autocomplete="off" title="Click to post comment" id="POST_ID"></textarea>
                        <input type="button" class="greenbutton postsubmitbutton postnewcomment" value="Comment" title="Post comment" alt="Post comment" style="padding:5px 10px;margin-top:5px;" id="postnewcomment">
                        <input type="button" class="normalbutton postsubmitbutton" value="Cancel" title="Close to post comment" alt="Close to post comment" style="padding:5px 10px;margin:5px 0 0 15px;" id="cencalnewcomment">
                    </td>
                </tr>
           </table>
        </div>

This is my HTML Code. When some body click in input id="newcommentinput" then hide this input and showing the table after it and also focusing after it. AND when click on button id="postnewcomment" then it post the message to another page display result and hide table and showing previuos input.

How to do this with jquery?

Now i am using the above jquery code to implement the above statement...

REMEMBER: there are multi div in page so write your answer for multi selection .

Answer 1

here is small code to bind events to class...

maybe you should start reading jquery documentation

    $(document).ready(function() {
            $(".inputofnewcommentinnewmodernpost").focusin(function() {
                    $(this).hide();
                    $(this).parent().find('.newcommenttableinnewmodernpost').show();
            });

            $('.postnewcomment').bind('click', function() {
                    $(this).parents('table').hide();
                    $(this).parents('.commentplaceofnewmodernpost').find('.inputofnewcommentinnewmodernpost').show();
            });
    });