Stack Exchange
Adding form fields according to drop down selections of the user
What i'm trying to achieve is adding input fields relevant to user's input on the drop down selection.So then next a text field appears, to the selection.I want to keep on appending those selection input fields.
Following is what i have tried so far,


<!DOCTYPE html>
<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>



<script>
$(document).ready(function(){
  
    $("#volvo").click(function(){
        $("option").append("<li>Volvo: <input type="text" name="volvotype" ></li>");
    });


  $("#saab").click(function(){
        $("option").append("<li>Saab Number: <input type="text" name="saabtype" value="Mickey"><br></li>");
    });

$("#opel").click(function(){
        $("option").append("<li>opel type: <input type="text" name="opeltype" value="Mickey"><br></li>");
    });

$("#audi").click(function(){
        $("option").append("<li>audi type: <input type="text" name="auditype" value="Mickey"><br></li>");
    });


});


</script>

</head>
<body>
<select>
  <option value="volvo" id="volvo">Volvo</option>
  <option value="saab" id="saab">Saab</option>
  <option value="opel" id="opel">Opel</option>
  <option value="audi" id="audi">Audi</option>
</select>
  
</body>
</html>



EDIT
as @Braza suggested, i don't want to override, i want to append each selected(through dropdown menu) input fields one by one.

try on change event instead of click

Possible duplicate of jquery select change event get selected option

@Braza i want to append not to override

@Kaw123 then use append when the change event is fired

You want to append the input in the drop down or on the page?

Thanks , i figured it out at last.

I created this fiddle to demonstrate https://jsfiddle.net/jbzL55ca/3 
$('select.theSelect').on('change', function (e) {}

