Skip to content
Advertisement

Dynamic Div Tags in a While Loop

I have a while loop that populates 4 div tabs (in one parent div) with PHP.

I also have a copy-to-clipboard script to copy text from a P tag. Unfortunately, this function works only if the tag and button have a unique Id.

So my question is this: How do I assign a sequential Id to my looped P tags? In the sense that I want the first set of tabs in the first populated div to have Ids 1,2,3,4, and the next one to have 5,6,7,8…and so on.

Here is the HTML in the PHP loop:

JavaScript

Here is the script I’m using to copy text from the P tag to the clipboard:

JavaScript

Advertisement

Answer

If you are not committed to using jQuery then you can easily accomplish your goal with some fairly basic, vanilla Javascript. The Clipboard API provides the modern solution for copying text (& other things) to & from the system clipboard.

In general working with IDs can become troublesome as they need to be unique within the DOM so where the same functionality needs to be applied to multiple it items you must try to do what you were initially hoping to do – assign sequential IDs or some other such solution and reference that ID in the function call. This does not scale well and better options exist.

The following uses no ID attributes anywhere – instead the event handler assigned to each button uses the event to identify which element was clicked ( invoked the handler ) and from that node it is possible, given that you know the DOM structure, to find other nodes of interest. In the code below the event.target refers to the button – from there we find it’s parent and from that parent we find the specific P element whose content is to be copied. The method suggested by @CBroe does this using jQuery methods – something I’m not familiar with.

JavaScript
Advertisement