Duplicate input fields in DOM giving error on jquery lightbox or calendar implementation

Duplicate input fields in DOM giving error on jquery lightbox or calendar implementation

Problem:

Sometimes we need to replicate the input fields on runtime with core js or jquery functions like .html, .append() or .prepend(). You will notice that most of the jquery examples are available with DOM ready functions or document ready. Most of the slicers get these examples as it is and provide a dummy application to development team. Due to shortage of time the developers implement it as it is. These things involves problems whenever we deal with “add more” fields functionality. In that case we mostly hardcode an input field or replicate some .html() result. For example you are going to replicate such field which is already implemented with a unique ID and especially for date time etc. So that calendar will not work on duplicated fields because of unique ID.

Solution:

What i suggest?

1. Either use the unique ID’s for each field which you are going to duplicate
2. Or Don’t use any ID for that field, DOM will maintain its uniqueness itself and you will not get any conflict

Important Note: For those guys who face problems on jquery lightbox implementation on those DOM elements which are created or appended on runtime. They must recall those functions which are initially called in dom ready function. I will suggest that make them as independent function and then call them in dom ready. So you can further use those function instead of being dependent on page refresh.
Another solution is to refresh that instance so it could initialize on required DOM elements again.