jquery - How to call the same datepicker on 2 different input fields -

i'm using bootstrap datepicker , have situation need call datepicker in input field 2 or more times,but problem that,the datepicker opens on first input filed,but on rest won't. tried changing id of input , datepicker script,still won't work. please help. thx in advance

code:

<div class='form-group'>                                         <div class='row'>         <div class="col-xs-12 date">             <label>label1</label>             <div class="input-group input-append date" id="daterangepicker">                     <input id='input' type="text" value=' <?php echo $var; ?>'                      class="form-control" name="daterangepicker" required />                     <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>             </div><!-- end input group -->         </div><!-- end col-xs-12 date -->      </div><!-- end row -->            <input type='checkbox'>         <label>data not available</label>         </div><!-- end form-group -->          <div class='form-group'>             <label>label2</label>             <input id='input' type='text' class='form-control' value=' <?php echo $var;  ?>' name="daterangepicker2" id="daterangepicker2">   </div><!-- end form-group --> 

script
note:i duplicated code below,while changed id daterangepicker daterangepicker2,and still wouldn't work.

$(document).ready(function() {      $('#daterangepicker')         .datepicker({             format: 'dd.mm.yyyy',             startdate: '01.01.2000',             enddate: '31.12.2020'         })         .on('changedate', function(e) {             // revalidate date field             $('#daterangeform').formvalidation('revalidatefield', 'date');         });      $('#daterangeform').formvalidation({         framework: 'bootstrap',         icon: {             valid: 'glyphicon glyphicon-ok',             invalid: 'glyphicon glyphicon-remove',             validating: 'glyphicon glyphicon-refresh'         },         fields: {             date: {                 validators: {                     notempty: {                         message: 'message1'                     },                     date: {                         format: 'dd.mm.yyyy',                         min: '01.01.2000',                         max: '31.12.2020',                         message: 'message2'                     }                 }             }         }     });   });  

there 2 issues in html. using attribute id 2 times. id="input" , 1 more id . here below

 <input id='input' type='text' class='form-control' value=' <?php echo $var;  ?>' name="daterangepicker2" id="daterangepicker2"> 

try below code

$(document).ready(function() {        $('#inputone,#inputtwo')          .datepicker({              format: 'dd.mm.yyyy',              startdate: '01.01.2000',              enddate: '31.12.2020',          	orientation: "top auto"          })          .on('changedate', function(e) {              // revalidate date field              $('#daterangeform').formvalidation('revalidatefield', 'date');          });          });

<div class='row'>          <div class="col-xs-12 date">              <label>label1</label>              <div class="input-group input-append date" id="daterangepicker">                      <input id='inputone' type="text" class="form-control daterangepicker2" name="daterangepicker" required />                      <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>              </div><!-- end input group -->          </div><!-- end col-xs-12 date -->       </div><!-- end row -->             <div class='row'>          <div class="col-xs-12 date">              <label>label1</label>              <div class="input-group input-append date" id="daterangepicker">                      <input id='inputtwo' type="text" class="form-control daterangepicker2" name="daterangepicker" required />                      <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>              </div><!-- end input group -->          </div><!-- end col-xs-12 date -->       </div><!-- end row -->  

working fiddle http://jsfiddle.net/anandgh/ajjlyd57/