JSLink changes the display of all the web parts based on the same template

Hi,

I managed to create a simple example with JSLink based on several posts that explain its basic functionality. I need to mantain it as simple as posible in order to render several web parts in the main page of a site in different ways. I don't want a solution that has to be deployed or created with visual studio but the most simple one. The problem is that when I apply the Jslink property to a web part, it is applied to every webpart in the page that is based on the same list template.

For example, I have two custom lists with different columns, I need to render the first one as an unordered list using <ul> and <li> tags.

I created the JSLink file with this code:

(function () {
	var itemCtx = {};
	itemCtx.Templates = {};
        itemCtx.Templates.Header = "<div><b>Prueba de cabecera</b></div><ul>";
        itemCtx.Templates.Item = ItemOverrideFun;
        itemCtx.Templates.Footer = "</ul>";

	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);

})();


function ItemOverrideFun(ctx) {
	return "<li style='background-color: #52D017;width: 300px;height: 24px;'>" + ctx.CurrentItem.Title + "</li></span>";     
}

I uploaded this template in the master page gallery in a specific folder using this metadata:

• Content Type: JavaScript display template
• Hidden: No
• Target Control Type: View
• Standalone: Override
• Target Scope: /
• Target Template ID: 100 (Custom List)

 In the first web part (added to the main page), the following is specified as the JSLink property:

~site/catalogs/masterpage/foldertest/jslinkfiletest.js

The new template is applied succesfully, but it overrides other webparts targeting custom lists in the main page. The same jslink template is applied to all of them.

How I can make it works only for one of the web parts added to the main page? What I'm missing?