Change the text of a link on clicking the link using javascript
<p>I am developing a social website like facebook in php. I have a page for displaying the messages for the user with two links,that is <code>reply</code> and <code>delete</code> at the right bottom corner for every messages in the inbox. My issue is that when I click the <code>reply</code> link,the text of both links should change to <code>post</code> and <code>back</code>.My html code is like this: </p>

<pre><code>&lt;div class="msgutil"&gt;
  &lt;a href="" id="reply" &gt;reply&lt;/a&gt; 
  &lt;a href="delete_message.php?msg_id=&lt;?php echo $row_msg_id;?&gt;" id="delete"&gt;delete&lt;/a&gt;//dont check this
&lt;/div&gt;&lt;!--end msgutil--&gt;
</code></pre>

<p>My javascript code is like this:</p>

<pre><code>$(document).ready(function() 
{

    //action to be done if link name is reply which is present below the message box
    $("#reply").click(function(e) 
    {
        //action to be done if link name has changed from "reply" to "post" which is present below the message box
        if(document.getElementById('reply').innerHTML=="reply")
        {
            document.getElementById('reply').innerHTML="Post";
            document.getElementById('delete').innerHTML="Back";
            var idstr = document.getElementById('sender_id').value;
            $('&lt;br/&gt;&lt;form id="msgreply" name="msgreply" action="post_messages.php" method="post"&gt; &lt;label for="txt_subject"&gt;&lt;strong&gt;Subject:&lt;/strong&gt;&lt;/label&gt;&lt;br/&gt;&lt;input type="text" id="txt_subject" name="txt_subject"/&gt;&lt;br/&gt;&lt;label for="txt_message"&gt;&lt;strong&gt;Message:&lt;/strong&gt;&lt;/label&gt;&lt;br/&gt;&lt;input type="hidden" id="to_id" name="to_id" value="'+idstr+'"/&gt;&lt;textarea name="txt_message" id="replyfield"&gt;&lt;/textarea&gt;&lt;/form&gt;').insertAfter("#temp");
            e.stopPropagation();
            e.preventDefault();
        }
        else if(document.getElementById('reply').innerHTML=="Post")
        {
            var message = document.getElementById('msgreply');
            message.submit();
            e.stopPropagation();
            e.preventDefault();
        }
    });
    //action to be done if link name is delete which is present below the message box
    $("#delete").click(function(e) 
    {
        //action to be done if link name has changed from "reply" to "post" which is present below the message box
        if(document.getElementById('delete').innerHTML=="Back")
        {
            $("#msgreply").remove();
            document.getElementById('reply').innerHTML="reply";
            document.getElementById('delete').innerHTML="delete";
            e.stopPropagation();
            e.preventDefault();
        }
    });
});
</code></pre>

<p>It works fine for the first message.If there are multiple messages in the inbox,on clicking the reply button of any messages other than first one, no action occurs.</p>
