JQuery :: How To Add Content After Element

I have a test jquery code like this
Code:
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() {
$('#test').live('click', function() {
$('#test').after('<p>Hello world!</p>');
});
});
</script>

And then in php I have input fields with a running ID (field amount varies)
PHP Code:
foreach ($out as $key => $value){
$i = 0;
echo $value['name'] . ' : <input id="test'. $i .'" type="text" name="'. key .'" /><br>';
$i++;
}

So what I am trying to achieve is that when user clicks some of the running input fields. It would add the text content after this input field which was clicked. And if it has been added already it would not add the text content again under this field.