Button only works on second click

There is no way to answer this question by simply looking at the code.

You need to troubleshoot your Javascript using the technique explained in this video:
https://www.youtube.com/watch?v=o5o18eawWpE

Thanks for the advice. I went through the troubleshooting and have modified my code and it now works on the first click. The problem is when the IF statement changes the value of the text on the button, it only will do it once (ie) it works on the first click but does nothing after that (the text remains the same). The 'Inpsect' process on Firefox and Chrome doesnt appear to give a reason why this is happening. Any ideas?

Client Before
params["txt"] = pageObj.getItemButton('PayPeriod_button').text();

Server
$result["txt"] = $params["txt"];

Client After
var message = result["txt"];

if (message == "Show All Pay Periods")
{
$("span[data-itemid=PayPeriod_button]").find("a").text("Show Current Pay Periods Only");
}
else
{
$("span[data-itemid=PayPeriod_button]").find("a").text("Show All Pay Periods");
}

The same thing, you need to step through the code to see what exactly happens on the second click, why it does or doesn't get executed. This is not a question one can possibly answer looking at the code. You need to execute this code and step through each step to see why it behaves this way.