Counting occurrences of a string in textarea using jQuery/Javascript not updating on new button-press

I have a button that puts the string:

<dt></dt><dd></dd>

on to the end of the text in a textarea with the id #upcoming_text.

I'm using JavaScript to count the number of occurrences of </dd> each time that the button is pressed. If the count of <dt> is greater than 20 then I have an if-statement that prevents any more of the above string being added.

The count works on first page refresh however it does not seem to count the new number of occurrences of </dd> with each subsequent button-press. (I tested this by alerting out the variable numlines, an开发者_StackOverflow中文版d it remains at the number when the page was refreshed.)

Am I missing some code?

$("#new_act").click(function(){  
  var text = $('#upcoming_text').text();  
  var eachLine = text.split('/dd');  
  var numlines = eachLine.length;  
  if(numlines > 20){  
    alert("You've reached the maximum number of acts");  
  }  
  else{  
    if (!$("#upcoming_text").val()){  
      $("#upcoming_text").val($("#upcoming_text").val()+"<dt></dt>\n<dd></dd>");  
    }  
    else{  
      ("#upcoming_text").val($("#upcoming_text").val()+"\n<dt></dt>\n<dd></dd>");  
    }  
  }  
});

The text method will return the inner text of the element, which is the orignal vale from the HTML code. You should use the val method instead, which returns the current text.