How to use same tokeninput for multiple fields

Question

I have a table in which a column(say names) consists of text field. I need same tokeninput for all the rows.

<script type="text/javascript">
$(function(){
$('#names').tokenInput([
  {id: 7, name: "Super Mario"},
  {id: 11, name: "Battletoads"},
  {id: 13, name: "Pong"},
  {id: 17, name: "The Legend of Zelda"},
  {id: 19, name: "Metroid"},
  {id: 23, name: "Donkey Kong Country"},
  {id: 29, name: "Super Smash Bros."},
  {id: 32, name: "Star Fox"},
  {id: 35, name: "Starcraft"},
  {id: 37, name: "Pokemon"},
  {id: 38, name: "Minecraft"},
  {id: 41, name: "The Sims"},
  {id: 43, name: "Final Fantasy"},
  {id: 44, name: "Resident Evil"},
  {id: 46, name: "Kingdom Hearts"},
  {id: 47, name: "Tetris"},
  {id: 48, name: "Grand Theft Auto"},
  {id: 51, name: "World of Warcraft"},
  {id: 53, name: "Metal Gear Solid"},
  {id: 54, name: "Civilization"},
  {id: 56, name: "Pac-Man"},
  {id: 59, name: "Animal Crossing"},
  {id: 62, name: "Spyro the Dragon"},
  {id: 64, name: "Crash Bandicoot"},
  {id: 65, name: "Sonic the Hedgehog"},
  {id: 72, name: "Tomb Raider"},
  {id: 77, name: "Mortal Kombat"},
  {id: 81, name: "Space Invaders"}
], { 
  theme: "facebook",
  noResultsText: "Nothin' found.",
  searchingText: "Searching...",
  preventDuplicates: true
}); 

});
</script>

I need the above token input for multiple fields . EX : say i have a table with a filed called Names. So i need for all the Name filed in each i want to use Same token input

Below is the Html

<tr><td><input type="text" id="names"></td></tr>
<tr><td><input type="text" id="names1"></td></tr>
<tr><td><input type="text" id="names2"></td></tr>

I am able to use for one text field, but i need it same for all the rows

Demo link: http://codepen.io/jakestuts/full/IBmja

Answer 1

You'll need to initialise them all individually - use a for loop.

var tokens = [
  {id: 7, name: "Super Mario"},
  {id: 11, name: "Battletoads"},
  {id: 13, name: "Pong"},
      etc...
  {id: 72, name: "Tomb Raider"},
  {id: 77, name: "Mortal Kombat"},
  {id: 81, name: "Space Invaders"}
];

for (var i = 1; i <= 3; i++){
    $('#names' + i).tokenInput(tokens, { 
      theme: "facebook",
      noResultsText: "Nothin' found.",
      searchingText: "Searching...",
      preventDuplicates: true
    });
}