CSS not rendering correctly after ajax update using <ui:repeat>

this one is kind of complicated. Basically I am using Material Design Lite css by google and firing an ajax request to add input fields dynamically using primefaces.

<h:commandLink value="+ Add something>
    <f:ajax listener="#{bean.method()}"
            execute="@form"
            process="@form"
            render="@form" />
 </h:commandLink>

The method called adds a new div in ui:repeat by adding a new entry to a list in my bean.

<h:form>
    <ui:repeat value="#{bean.list}" var="v">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <h:inputText value="#{v.value}" id="valuetitle"/>
            <label class="mdl-textfield__label" for="valuetitle">valuetitle</label>
         </div>
    </ui:repeat>
</h:form>

Problem: The CSS is not getting updated properly. It does not initiate the class I gave to the div.. any one knows a solution?