Targeting Dynamically Generated Id

JavaScript
#1

I am generating rows, columns and setting an id dynamically. I need to target the 3rd column on the second row in JS. How do I target it?

 	          
     $(document).ready(function() {
     
     	var container = document.createElement("div");
      	container.setAttribute('id','container');
     	container.classList.add('container','text-center','my-5');
      
	    $.ajax({
	    url: "http://bc-net/Sandbox/juandev/_api/web/lists/GetByTitle('Qlinks')/items",
	    method: "GET",
	    headers: {
	        "Accept": "application/json; odata=verbose"
	    },
	    success: function(data) {
	    	var items = data.d.results;
	        console.log(items);
	       
	        
	        
	        var createRows = function(i, items) {

                //Creates 3 Rows inside container
                var row = document.createElement("div");
                row.setAttribute('id', 'row' + i);
                row.classList.add('row', 'mb-5');
        
                //Appends Row to Container
                var getContainer = document.getElementById('container');
                getContainer.appendChild(row);
                
                createColumns(i, items);
                
            };//End of creare Rows Function
            
             /* var createCounter = function () {
            
            	var counter = document.createElement = ("div");
            	counter.classList.add('counter');
            	console.log(counter);
            	
            	var appendCounter = document.getElementById('columns');
            	appendCounter.appendChild(counter);
            	
            	createCounter();
            
            }*/
        
            //Creates Rows for every 3 items
            var createColumns = function(i, items) {
                
                for (var j = i; j < (i+3); j++) {
                 
                 
                    //Creates 3 Columns inside the 3 rows
                    var columns = document.createElement("div");
                    columns.setAttribute('id', 'columns' + j);
                    columns.classList.add('col-md-4', 'slide-in-demo');
                    columns.style.left = '0%';
        
                    //appends the 3 columns inside the rows
                    var getRow = document.getElementById('row' + i);
                    getRow.appendChild(columns);
        
                    //Pulls the images from the list

                    var icon = document.createElement("img");
                    icon.setAttribute('id', 'icon' + j);
                    icon.style.width = '15%';
                    icon.src = items[j].IconImage1.Url;
        
                    //Pulls header from the list
                    var header = document.createElement("h5");
                    header.setAttribute('id', 'header' + j);
                    header.innerHTML = items[j].Title;
                    header.classList.add("font-weight-bold", "my-4");
        
                    //Appends elements columns
                    var getColumns = document.getElementById('columns' + j);
                    getColumns.appendChild(icon);
                    getColumns.appendChild(header);
        
                    //Creates buttons
                    var button = document.createElement("button");
                    button.classList.add('btn', 'btn-primary', 'btn-sm', 'waves-effect', 'waves-light');
                    button.setAttribute('id', 'button' + j);
                    button.setAttribute('href', '#');
        
                    //Appends button to coulmns
                    getColumns.appendChild(button);
        
                    var txt = document.createTextNode('LEARN MORE');
        
                    var getButton = document.getElementById('button' + j);
                    getButton.appendChild(txt);
        
                    var para = document.createElement("p");
                    para.classList.add('grey-text', 'mb-md-0', 'mb-5');
                    
         
                                   
                  } //End of j Loop
                  return;

            }// End of createColumns function
            
            //function that targets dynamic id         
         function getColElement(row, column){
		    var targetId = row * 3 + column ;
		   console.log(targetId);
		    var getTargetId = document.getElementById("columns" +  targetId);
		    console.log(getTargetId);
		   
		    
	}//End of function that targets id
		  
	//Function that builds the badge
	 function buildBadge() {
                var badgeContainer = document.getElementById('services');
               
                //Create counter
                var counter = document.createElement('div');
                counter.setAttribute('id', 'counter');
                counter.classList.add('counter');
                //console.log(counter);
                var counterText = document.createElement('p');
                counterText.setAttribute('id', 'counterText');

                badgeContainer.appendChild(counter);
                counter.appendChild(counterText);
                
                 getColElement(1, 2);
	        getColElement(2, 0);
                               
            } ////End of Function that builds the badge

            buildBadge();

	
	
	
	
	 if (items.length > 0) {
        
           
                //Gets Section in DOM
                var getSection = document.getElementById('services');
                
                getSection.appendChild(container);

                //var trow = 0;
        
                for (var i = 0; i < items.length; i++) {
                    //This loops creates Rows, Columns, H5, Images and Buttons   
                    
		   var itemId = items[i].ID;
		   
		  
		  
	            //console.log(itemId); 
	              
                    if ( i % 3 == 0) {
                    
                      createRows(i, items);
                      
                    }
                }
            }
        
        },
        		 error: function(data) {
		        alert("Error: " + data);
		    }
		}); //End Service Icons  //End Service Icons

 }); //End ready function

columns

#2

It depends on what logic dictates which cell you want to select. If it’s always specifically the third row of row3, then you can target it that way. If you know that you need to highlight a row when you’re generating it, you can add a class when you’re generating it. The possibilities abound.

#3

Thanks for your response @ArielLeslie. The problem is since these are dynamically generated rows and cols they need to be dynamically targeted as well. That is why I created this function

function getColElement(row, column){
		    var targetId = row * 3 + column ;
		   console.log(targetId);
		    var getTargetId =  document.getElementById(targetId);
		    
	}//End of function that targets id

But the problem is when console.log(getTargetId); the result is null

#4

Are you sure that targetId is being set correctly and getColElement is being calle at the correct time?

#5

Now that you mentioned this, I moved the function somewhere else and it seems to be working.
Thanks @ArielLeslie

#6

I’m glad to hear that you figured it out. Good job and happy coding!

#7

Thank you @ArielLeslie!

#8