Question

I have an html form where on the input field selection from a drop down i want to add some html input fields. I am using append() but it actually just appends to the div let say i have 2 options 1,2 on selecting 1 some input fields are added to the form but on selecting 2 input fields for option 1 remains the same. What another method i can use instead off append ? I am really missing something very basic, googled a lot but not helping in this case.

jQuery('#category').change(function() {
   if( $(this).val() == 1 ) {
      // input fields to add for 1
   }
   if( $(this).val() == 4 ) {
     // input fields to add for 4
   }
});

Answer 1

Why not create all the input fields initially in the form and do the following:

$(document).ready(function()
{
    $("#inputfield1").hide();
    $("#inputfield2").hide();
});

jQuery('#category').change(function() {
   if( $(this).val() == 1 ) {
      $("#inputfield1").show();
      $("#inputfield2").hide();
   }
   if( $(this).val() == 4 ) {
      $("#inputfield2").show();
      $("#inputfield1").hide();
   }
});