javascript - Jquery use data-id and disable and clear input field -

for variety of reasons want change code below out data attributes rather class called "mygroup".

html

<select id="apply">     <option value="email">email</option>     <option value="website">website</option> </select> <input type="text" class="input" id="email" placeholder="test@test.com" data-id="application"/> <input type="text" class="input" id="website" placeholder="www.example.com" data-id="application"/> <textarea class="input" rows="4" cols="50" placeholder="text*" data-id="applicationdetails"></textarea> 

js

// apply fields function applyfield() {     $(document).on('change', '#apply',function() {         var selected = $(this).find(':selected').val(),             elem = $("#"+selected);         $(".mygroup").addclass('hidden');         elem.removeclass('hidden');     });     $("#apply").trigger('change'); }; 

fiddle

how change code above apply data-id of "application" rather using class "mygroup". bonus points can tell me how clear content of field being hidden , disable it?

you refer $('[data-id="application"]').

as clearing , disabling, use .prop() , .val(''):

$('[data-id="application"]').addclass('hidden').prop('disabled', true).val(''); elem.removeclass('hidden').prop('disabled', false); 

demo