Web Part specific DOM Manipulation. Two identical Script Editor Web Part Code blocks

Question

We have a script editor web part with javascript that references some jquery libraries. The code creates web part properties and hides DIV tag in the web part based on some conditions. It works great until I try to place the same exact web part / code block on the same page twice. The way we are rolling this out we don' t users messing the code and we want the WP properties UI to be identical on both Web Parts.

Given all this.. is it possible with jquery code to perform Web Part specific DOM manipulation without any conflict with other similar Web Parts and Script editor code blocks on the page? Possible to dynamically change DIV Tag IDs, Jquery Variables and WP Properties to have the unique web part GUID?

Possible? Any ideas would be appreciated.

Here's the problem: http://screencast-o-matic.com/watch/coeUlneNT6

Code:

    function addCustomProperty(propertyID, label, initialValue)
{
 customPropertyIndex.push({ propertyID: propertyID, label: label });
}var toolEditorPanePropertyHtml = "<div><table style=\"width: 100%; border-collapse: collapse;\" cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td><div class=\"UserSectionTitle\"><a title=\"Expand category: {PROPERTYNAME}\" id=\"{PROPERTYNAME}_IMAGEANCHOR\" onclick=\"javascript: MSOTlPn_ToggleDisplay('{PROPERTYNAME}', '{PROPERTYNAME}_IMAGE', '{PROPERTYNAME}_ANCHOR', 'Expand category: {PROPERTYNAME}', 'Collapse category: {PROPERTYNAME}', '{PROPERTYNAME}_IMAGEANCHOR'); return false;\" href=\"#\">&nbsp;<img id=\"{PROPERTYNAME}_IMAGE\" alt=\"Expand category: {PROPERTYNAME}\" src=\"/_layouts/15/images/TPMax2.gif\" border=\"0\">&nbsp;</a><a tabindex=\"-1\" title=\"Expand category: {PROPERTYNAME}\" id=\"{PROPERTYNAME}_ANCHOR\" onclick=\"javascript: MSOTlPn_ToggleDisplay('{PROPERTYNAME}', '{PROPERTYNAME}_IMAGE', '{PROPERTYNAME}_ANCHOR', 'Expand category: {PROPERTYNAME}', 'Collapse category: {PROPERTYNAME}', '{PROPERTYNAME}_IMAGEANCHOR'); return false;\"> &nbsp;{PROPERTYNAME}</a></div></td></tr></tbody></table><div class=\"ms-propGridTable\" id=\"{PROPERTYNAME}\" style=\"display: none;\"><table style=\"border-width: 0px; width: 100%; border-collapse: collapse;\" cellspacing=\"0\"><tbody><tr><td><div class=\"UserSectionHead\"><label title=\"Name of field to hide.\" for=\"{PROPERTYNAME}_EDITOR\">{LABEL}</label></div><div class=\"UserSectionBody\"><div class=\"UserControlGroup\"><nobr><input name=\"{PROPERTYNAME}_EDITOR\" class=\"UserInput\" id=\"{PROPERTYNAME}_FieldName_EDITOR\" value=\"{INITIAL}\" style=\"width: 176px; direction: ltr;\" type=\"text\" ms-tlpnwiden=\"true\"></nobr></div></div><div class=\"UserDottedLine\" style=\"width: 100%;\"></div></td></tr></tbody></table></div></div>";


function injectItemID(fieldName)
{
    $.each($(".ms-formbody"), function (index, value) {
        if ($(value).html().indexOf("FieldName=\"" + fieldName + "\"") > -1) {
            $(value).find("input").val($.getUrlVar("ID"));
        }
    });
}

Answer 1

As Amal said you should try not to put duplicate code blocks on your page. You could either make your code generic (looks up the web part GUID etc.) or use just one codeblock for both.

Answer for one code block

In jQuery you can use a selector with a comma as separator such as [webpartid="firstID"],[webpartid="anotherID"] to find both target Web parts' HTML elements. Then you can for example loop these elements and perform your changes on them using jQuery.each();. Within the each loop you can get data such as GUID from the webpart using jQuery(this);

Simple example:

jQuery('[webpartid="firstID"],[webpartid="anotherID"]').each(function(){ 
    var thisElem = jQuery(this);
    var webPartGUID = thisElem.attr("ID");
    //Your code  
}

Relevant jQuery documentation

https://api.jquery.com/category/selectors/

https://api.jquery.com/each/