Textarea updating

This works differently is different browsers

HTML

<p>
  Textarea:
</p>
<textarea id="txtArea">initial text</textarea>
<p>
First: Use these buttons to clear the text box or add some text
</p>
<button id="clear">Clear text</button>
<button id="add">Add text</button>
<p>
Now, type something in the text box and then try the Clear/Add buttons again.
<br />
If you're using Edge/IE the buttons work as before, but if you're using Chrome nothing happens.
</p>

CSS

body {
   padding: 5px;   
}
p {
  padding-top: 10px;
}

JavaScript

$('#clear').click(function() {
  $('#txtArea').val("");
});
$('#add').click(function() {
  $('#txtArea').val("other text");
});