blah.js

var elementExists = document.getElementById("changed");
        elementExists.addEventListener("touchend", touchSidebar, false);
        function touchSidebar(e){
        if($(e.target).hasClass('sku')) // Here we determine our target is infact a sku
        {
            $.ajax({
                type:"POST",
                url:'sidebar.php',
                data:{"sku": $(e.target).html()},//Here we ajax that sku value so php can give us the info.
                success: function(data){
                    if(data !== "[]") // If our data isn't empty lets start building.
                    {
                        data = JSON.parse(data) //parse our response to workable data

                        //Our header for the sku data. We're using grid so I'd like it to act similar to a table for easy reading.
                        var skuHeader = '<div class="sidebar-grid-1quarter">' + 'Designer' + '</div><div class= "sidebar-grid-2quarter">' + 
                                            'Price' + '</div><div class="sidebar-grid-3quarter">' + 'Gold Type' + '</div><div class="sidebar-grid-4quarter">' + 
                                            'Stone Type' + '</div>';

                                            
                        //Here's our sku data which we put under our sku header
                        var skuData = '<div class="sidebar-grid-1quarter">' + data[0]['designer'] + '</div><div class= "sidebar-grid-2quarter">'+
                        data[0]['price'] + '</div><div class="sidebar-grid-3quarter">' + data[0]['metal_type'] + '</div><div class="sidebar-grid-4quarter">' + 
                        data[0]['stone_type'] + '</div>';


                        
                        
                        $("#sku-information").remove() // Cleanup any exisiting sku information
                        $("#customer-sidebar").append("<div class='sku-information sidebar-grid-full' id='sku-information'>") //start our sku container
                        $("#sku-information").append("<div class='sidebar-grid-full'> Sku Information </div>")//append a banner to the top of the sku container
                        
                        //display full container width image of the sku
                        var imagesend = '<img class="sidebar-grid-full sidebar-img" src="' + data[0]['item_img'] + '"' + '></img>'
                        $("#sku-information").append(imagesend)

                        //If the img is broken or doesn't exist just don't display it.
                        document.querySelectorAll('img').forEach(function(img)
                        {
                            img.onerror = function(){this.style.display='none'
                        }});

                        $("#sku-information").append(skuHeader) //add our sku header
                        $("#sku-information").append(skuData) // complete the container with the sku Data. Congrats you have a sidebar.
                        $("#customer-sidebar").append("</div>")

                    }
            
                
                },
                error: function()
                {
                    console.log("error")
                }
                  
            })  
        }
    }