<div>
<div class="content wysiwyg-content">
why datepicker is not selectable even though different ids<br />
<br />
&nbsp;$( &quot;input[id^=effectivedate]&quot;<wbr /> ).datepicker();<br />
<br />
<br />

<pre><code id="code-10-28688886-1">&lt;input type=&quot;text&quot; id=&quot;effectivedate1&quot; name=&quot;employeeChange[1].effectiveDate&quot; readonly=&quot;&quot;  class=&quot;form-control input-md hasDatepicker&quot;&gt;

&lt;input type=&quot;text&quot; id=&quot;effectivedate&quot; name=&quot;employeeChange[0].effectiveDate&quot; readonly=&quot;&quot;  class=&quot;form-control input-md hasDatepicker&quot;&gt;</code></pre>
</div>
</div>


why datepicker is not selectable even though different ids

 $( "input[id^=effectivedate]" ).datepicker();


(CODE)

why datepicker is not selectable even though input types are having different ids

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

jQuery

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.