As part of a multi-interface Web application, I am using vanilla JavaScript to create and modify hundreds of HTML elements on a single page. A bug has inconsistently arisen where Users are not able to produce the desired effect by interacting with these dynamically generated HTML elements, until they either (1) make multiple attempts or (2) engage with any given element in a secondary way.

For example, I have created a table where each cell (for the first few columns, when clicked on) auto-generates a dropdown menu of choices. Half of the time, when these choices are selected, the desired result occurs. While the other half of the time, the User must either make multiple attempts at their selection, or scroll the choices up-and-down and then make their selection in order to produce the desired outcome.

How can I (while using vanilla JavaScript) better ensure that the HTML I am dynamically creating is more reliable at producing the desired outcome when interacted with by a User? Are there any programming styles or techniques that I can research in order to accomplish this goal?