title: bootstrap datepicker not working inside of a javascript
body: <p>Why does the bootstrap not working inside a javascript but working outside .</p>
  
  <p>Here's my code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var date = new Date();
    date.setDate(date.getDate());
  
  $('.datepicker').datepicker({
       startDate: date,
          autoclose: true,
          format: "mm-dd-yyyy",
          todayHighlight: true,
          orientation: "top auto",
          todayBtn: true,
          todayHighlight: true,  
      });
   var rowCount = 1;
  
  function removeRow(removeNum) {
  jQuery('#rowCount'+removeNum).remove();
  rowCount --;
  rcount();
  }
  
  function addMoreRows(frm) {
  rowCount ++;
  var recRow = '&lt;p id="rowCount'+rowCount+'"&gt;&lt;tr&gt;&lt;td&gt;&lt;input id="datepkr" class="form-control datepicker" style="width:60%; float:left;" name="" type="text"/&gt;&lt;/td&gt;&lt;td&gt;&lt;a style="float:left;" href="javascript:void(0);" onclick="removeRow('+rowCount+');"&gt;&lt;i class="glyphicon glyphicon-remove" style="color:red;"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/p&gt;';
  jQuery('#addedRows').append(recRow);
  
    if (rowCount&gt;15){
     $('#btnAdd').prop('disabled', true);
    }
  
  }
  function rcount(){
   if (rowCount==3){
    jQuery('#x2').hide('slow');
    jQuery('#x3').show('slow'); 
    }
    if (rowCount==4){
    jQuery('#x3').hide('slow');
    jQuery('#x4').show('slow'); 
    }
    if (rowCount==5){
    jQuery('#x4').hide('slow');
    jQuery('#x5').show('slow'); 
    }
    if (rowCount==6){
    jQuery('#x5').hide('slow');
    jQuery('#x6').show('slow'); 
    }
    if (rowCount==7){
    jQuery('#x6').hide('slow');
    jQuery('#x7').show('slow'); 
    }
    if (rowCount==8){
    jQuery('#x7').hide('slow');
    jQuery('#x8').show('slow'); 
    }
    if (rowCount==9){
    jQuery('#x8').hide('slow');
    jQuery('#x9').show('slow'); 
    }
    if (rowCount==10){
    jQuery('#x9').hide('slow');
    jQuery('#x10').show('slow'); 
    }
    if (rowCount==11){
    jQuery('#x10').hide('slow');
    jQuery('#x11').show('slow'); 
    }
    if (rowCount==12){
    jQuery('#x11').hide('slow');
    jQuery('#x12').show('slow'); 
    }
    if (rowCount==13){
    jQuery('#x12').hide('slow');
    jQuery('#x13').show('slow'); 
    }
    if (rowCount==14){
    jQuery('#x13').hide('slow');
    jQuery('#x14').show('slow'); 
    }
    if (rowCount==15){
    jQuery('#x14').hide('slow');
    jQuery('#x15').show('slow'); 
    }
    if (rowCount==16){
    jQuery('#x15').hide('slow');
    jQuery('#x16').show('slow'); 
    }
    
    if (rowCount&gt;14){
     $('#btnAdd').prop('disabled', true);
    }
    else{
     $('#btnAdd').prop('disabled', false);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script   src="https://code.jquery.com/jquery-3.1.0.js"   integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="   crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"&gt;
      &lt;script src="http://code.jquery.com/jquery-1.11.1.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/blogController.js"&gt;&lt;/script&gt;
  
  &lt;table&gt; 
   &lt;tr id="rowId"&gt;
   &lt;td&gt;&lt;input name="" type="text"  value="" class="datepicker"/&gt;&lt;/td&gt;
   &lt;td&gt;&lt;button type="button" id="btnAdd" onclick="addMoreRows()" class="btn btn-primary"&gt;&lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt;ADD&lt;/button&gt;&lt;/td&gt;
   &lt;/table&gt;
   &lt;div id="addedRows"&gt;&lt;/div&gt;
  &lt;/td&gt;
  &lt;/tr&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://i.stack.imgur.com/bWNWz.png" rel="nofollow">Here it is Showing the Datepicker</a>
    <a href="http://i.stack.imgur.com/oxzLv.png" rel="nofollow">but in a javascript generated input its not showing</a></p>
  
  <p>Hope someone will help . Thanks .</p>