• 23.3k
• 9
• 57
• 69

• 63
• 7

Im trying to add additional fields in case when my user has filled up one group of inputs. So the idea is that when he finishes filling up the last input in that group, another group of inputs for same kind of items collapses/appears under existing one. One group of items consists of three inputs. After filling up that one, another group of inputs would appear under. I will present my code under. Hope someone can help me!

<div class="new-providers">
 
 <div class="provider-append" id="toggleExtraProvider">
 <div class="form-group">
 <label>Provider</label>
 <input type="text" class="form-control" id="practiceProvider" placeholder="Full provider name with coredentials" />
 </div>
 <div class="form-group">
 <label>NPI</label>
 <input type="text" class="form-control" id="providerNPI" placeholder=" NPI" />
 </div>
 <div class="form-group">
 <label>MM #</label>
 <input type="text" class="form-control" id="providerM" placeholder="M Provider #" />
 </div>
 
 <hr />
 </div>
 
</div> 

I tried appending the provider-append class on to the new-providers class

This is my jQuery script:

<script type="text/javascript">
 $(document).ready(function() {
 $("#toggleExtraProvider div.form-group input").each(function() {
 if($(this).val() =! "") {
 var target = $("new-providers");
 target.append(".provider-append");
 }
 }); 
 
 });​
</script>