javascript - Dynamically add form elements in MDL -

i want add text input element form dynamically. i'm using mdl css3 framework. addin new elemnt form:

    <form>   <div id="enter-participant-details-div">     <div id="1" class="mdl-textfield mdl-textfield--floating-label mdl-js-textfield mdl-cell--6-col">       <input class="mdl-textfield__input" type="text" name="participant[]" required />        <label class="mdl-textfield__label">participant 1</label>      </div>   </div> </form> 

i add new text element using :

var x = '<div class="mdl-textfield mdl-textfield--floating-label mdl-js-textfield mdl-cell--6-col" style="margin:2px;" >'       +'  <input class="mdl-textfield__input" type="text" name="participant[]" required />'       +'  <label class="mdl-textfield__label">participant 2</label>'     +'</div>'; $('#enter-participant-details-div').append(x); 

when try that, css properties of new text input not changing.

check @ => https://jsfiddle.net/mr4pswaq/2/

what should make first text input element?

for dynamically created elements, need manually upgrade it.

just add following line:

componenthandler.upgradedom();