jQuery replace text when clicking over different input text objects

jQuery replace text when clicking over different input text objects

I'm new to JS/jQuery. WHat I try to achieve is that every time I press
over "Title" or "Description", only the current's text area message should
appear.
I tried to clone the original div, but I really didn't know where or how
to use it, so this idea of replacing the text seemed easier to implement.
As I said, I'm new to web programming and I really hit the rock. I don't
understand why the following code doesn't work:
http://jsfiddle.net/MceE9/
<div class="content">
<form method="POST" id="anunt">
<table id="anunt">
<tr id="title">
<td> Title: </td>
<td> <input type='text' name='title' id='titleClick'> </td>
</tr>
<tr id="description">
<td> Description: </td>
<td> <textarea rows="5" cols="40" id="descriptionClick"
name="description"></textarea> </td>
</tr>
<tr>
<td> <input type="submit" name="send" value="Send"> </td>
</tr>
</table>
</form>
var title;
var description;
$('#titleClick').one('click', function(){
title = '<span id="text" style="font-weight: bold; font-size:
18px; color: red;">Title text</span>';
$("#title").append(title);
$('#description').html($('#description').html().replace(description,
''));
});
$('#descriptionClick').one('click', function(){
description = '<span id="text" style="float:left; font-weight:
bold; font-size: 18px; color: red;"> Description text</span>';
$("#description").append(description);
$('#title').html($('#title').html().replace(title, ''));
});