HTML input id manipulation with jQuery / javascript

I have a div that shows different html each time a user is selecting different options from a drop down menu. What I am trying to achieve is manipulate the id's that the div outputs.

This is my code for the html drop down:

<select name="surveys" id="surveys" required>
           <option value="">Select a Survey</option>
            <cfloop query="application.clientAdminSurveys">
               <option value="#name#">#name#</option>
            </cfloop>
        </select>

This is the JS that controls the drop down:

 $('#surveys').change(function (event) {

     var survey = $('#surveys').val().toLowerCase();

     if(survey.indexOf('consultation') !== -1 && survey.indexOf('cancellation') === -1 ){
         $('.type').show();
         $('.type').html('<input type="text" id="consultServiceType" name="consultServiceType" placeholder="Consult Service Type"  /> <input type="text" id="eventDate" name="consultDate" placeholder="Consult Date"  /><input type="text" id="consultantName" name="consultantName" placeholder="Consultant Name" /> '); 
     }else if(survey.indexOf('cancellation') !== -1){
         $('.type').show();
         $('.type').html('<input type="text" id="eventDate" name="cancellationDate" placeholder="Cancellation Date" />');
     }else if(survey.indexOf('procedure') !== -1 && survey.indexOf('cancellation') === -1){
         $('.type').show();
         $('.type').html('<input type="text" id="serviceType" name="serviceType" placeholder="Service Type"/><input type="text" id="eventDate" name="serviceDate" placeholder="Service Date" /><input type="text" id="serviceProviderName" name="serviceProviderName" placeholder="Service Provider Name" /><input type="text" id="serviceRevenue" name="serviceRevenue" placeholder="Service Revenue" />');
     }else if(survey.indexOf('inquiry') !== -1){
         $('.type').show();
         $('.type').html('<input type="text" id="eventDate" name="inquiryDate" placeholder="Inquiry Date" />');
     }else{
         $('.type').hide();
     }
 });

How I output the JS code:

 <div class="type"></div>

The HTML output from firebug:

<div class="type">
  <input id="consultServiceType" type="text" placeholder="Consult Service Type" name="consultServiceType">
  <input id="eventDate" type="text" placeholder="Consult Date" name="consultDate">
  <input id="consultantName" type="text" placeholder="Consultant Name" name="consultantName">
</div>

I need to be able to manipulate the ID that comes from the output of the div. Any ideas how I can do that? When I do this:

$('.type').mouseenter(function() {
    alert('hello!');
});

I get the alert as I should but I want to drill down to <input id="eventDate" type="text" placeholder="Consult Date" name="consultDate"> with something like:

 $('.type:input#eventDate').mouseenter(function() {
        alert('hello!');
 });