how to apply a function to multiple elements with the same name in Javascript / jQuery

Question

I am using tagify.js plugin where you can add tags into an input. I have 2 modals, each contains an input where you can add usernames as tags.

<input class="form-control" name="tags"></input>

As the attribute name can be added to multiple inputs not necessary must be unique as id attribute, I kept the name="tags" in both modal.

The problem is when I apply the plugin and add tags to the inputs it's applied only to the input of first modal and not the second.

As you see in the screenshot, in first modal I can select tags inside the input but in the second modal it's empty.

The function I created doesn't generate any error. I tried console.log each variable I have but I couldn't figure out where the issue is.

Any suggestions please what am I doing wrong ? Thank you very much.

Here is my running example. I added comments for better understanding.

http://plnkr.co/edit/a0kAjGVHZluwWgpj?open=lib%2Fscript.js

As the attribute name can be added to multiple inputs not necessary must be unique as id attribute, I kept the name="tags" in both modal. this is "usually" accomplished by using the "class" property to group like things together. — James
– James, Commented Nov 19, 2020 at 17:08

Frenchy · Accepted Answer · 2020-11-19 17:46:00Z

1

In your code querySelector select only the first,

if you want select all, you have to use querySelectorAll

var inputElm = document.querySelectorAll('input[name=tags]');

in this case inputElm is an array with all input founded and you have to modify your code to use the different elements. ($.each or other loop). And you have to create an instance of tagify for each input. I suggest you to use an array of tagify.

Something like that:

var tagify = [];
inputElm.each(function(){
    var tag = new Tagify($(this),...
      :
    tagify.push(tag);
}

edited Nov 19, 2020 at 17:46

answered Nov 19, 2020 at 17:35

Frenchy

17.1k3 gold badges21 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to apply a function to multiple elements with the same name in Javascript / jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related