Some form values not getting submitted after using .replaceWith()

Let's say I have this form:

<form action="submit" method="post">

<select name="category" id="categorylist">

<option value="love">Love</option>

<option value="magic">Magic</option>

<option value="custom">Custom</option>

</select>

<textarea name="content">SomeContent</textarea>

<input type="submit">

</form>

I wanted to change the select into an input when I select custom so I came up with this:

$(function(){

  $('#categorylist').change(function(){

    $(this).replaceWith('<input type="text" name="category">');

  });

  if( $('#categorylist').val() == 'custom' )

    $('#categorylist').replaceWith('<input type="text" name="category">');

});

But when the select is changed into an input, $_POST['category'] isn't there when i dumped $_POST on form submission. Why is it so?