Adding same spfx webpart(no javascript framework) with different configuration, multiple times on the same page replaces the previous webpart output

Question

I have created a spfx webpart (no javacript framework), it shows member name from active directory.it is working fine if i use once, if i add more than once it replaces the previous output. here is my code,

Answer 1

Your render method is rendering a <div> with id="links8". Which means that if there are multiple instances your webpart on the page, then there will multiple div's with the same "links8" ID.

Thus, when your jQuery sets the html of jQuery("#links8"), it will update the HTML content of every element on the page with that ID.

So, you need to make sure your getMembers is only looking inside your component for a "links8" div instead of looking at the whole page.

First, insert the following as the new first line of your getMembers function before the Ajax call:

const linksDiv: Element = this.domElement.querySelector('#links8');

Then, after you've concatenated your html, use the following to update your div:

linksDiv.innerHTML = html;

And likewise, change the line in your else condition to

linksDiv.innerHTML = "No users in the Active Directory Group";