jquery - Form fill up with check box -

i want set of form user input billing address , checking check box user able fill next part.

i want jquery. if possible, how can it.

or, if not possible jquery. then, how can it?

<form role="form" class="form-horizontal"> <div class="form-group"> <h2>billing address</h2> <p><span>address 1</span><input type="text" placeholder="name" id="billing_addres_1"></p> <p><span>address 2</span><input type="text" placeholder="name" id="billing_addres_2"></p> <p><span>city</span><input type="text" placeholder="name" id="billing_city"></p> <p><span>country/region</span><input type="text" placeholder="name" id="billing_country"></p> </div> <div class="form-group"> <div class="checkbox"> <p><input type="checkbox">check if billing address same</p> </div> </div> <div class="form-group"> <h2>billing address</h2> <p><span>address 1</span><input type="text" placeholder="name" id="permanent_addres_1"></p> <p><span>address 2</span><input type="text" placeholder="name" id="permanent_addres_2"></p> <p><span>city</span><input type="text" placeholder="name" id="permanent_city"></p> <p><span>country/region</span><input type="text" placeholder="name" id="permanent_country"></p> </div> <button class="btn" type="submit">sign in</button> </form> 

this simple. markup not great, need assign specific id on each input element. populate jquery. here jsfiddle: http://jsfiddle.net/pvu8r/

<form role="form" class="form-horizontal"> <div class="form-group"> <h2>billing address</h2> <p><span>address 1</span><input type="text" placeholder="name" id="address1"></p> <p><span>address 2</span><input type="text" placeholder="name" id="address2"></p> <p><span>city</span><input type="text" placeholder="name" id="city"></p> <p><span>country/region</span><input type="text" placeholder="name" id="country"></p> </div> <div class="form-group"> <div class="checkbox"> <p><input type="checkbox" id="checkit">check if billing address same</p> </div> </div> <div class="form-group"> <h2>billing address</h2> <p><span>address 1</span><input type="text" placeholder="name" id="address1b"></p> <p><span>address 2</span><input type="text" placeholder="name" id="address2b"></p> <p><span>city</span><input type="text" placeholder="name" id="cityb"></p> <p><span>country/region</span><input type="text" placeholder="name" id="countryb"></p> </div> <button class="btn btn-default" type="submit">sign in</button> </form> 

jquery (this should wrapped in tags right before tag:

$(document).ready(function(){     $("#checkit").click(function(){         if($(this).is(':checked')){         var address = $("#address1").val();         var address2 = $("#address2").val();         var city = $("#city").val();         var country = $("#country").val();         //set variable in lower form vars set above         $("#address1b").val(address);         $("#address2b").val(address2);          $("#cityb").val(city);         $("#countryb").val(country);         }else{ //uncheck - clear input         $("#address1b").val("");         $("#address2b").val("");          $("#cityb").val("");         $("#countryb").val("");         }     }); }); 

make sure add jquery file otherwise not work. hope helps!