title: Multiple of the similar "Select Option" ID , Dynamic Javascript Code
body: <p><a href="https://i.stack.imgur.com/xa0sh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xa0sh.png" alt="enter image description here"></a></p>
  
  <p>1) I need to find a way to have multiple of id="select-repo" because every single "add another item" is the same. "Add Another Item" is suppose to add another row of html with that id="select-repo" for now it's just a empty textbox. </p>
  
  <p>Generate Functions on the go? Dynamic Functions? I can easily loop the Select box but not the "$('#select-repo').selectize({" function i believe.</p>
  
  <p>2) After number 1 is solved, I need to find a way to know which row of data to update after an option has been selected. </p>
  
  <p>3) Is this easier to get done with VUE.JS, since i'm using laravel , integration should be easier with <strong>Vue.JS</strong></p>
  
  <p>What is your advice, I was told to use stuff like ReactJS / styled components? is there anyway to not switch framework to just get this done? </p>
  
  <p>Please Advice. </p>
  
  <p><strong>HTML Code</strong></p>
  
  <pre><code>&lt;td&gt;&lt;select id="select-repo" class="repositories"&gt;&lt;/select&gt;&lt;/td&gt;
  </code></pre>
  
  <p><strong>JS Code</strong></p>
  
  <pre><code>&lt;script&gt;
                  //&lt;select id="select-repo"&gt;&lt;/select&gt;
                  $('#select-repo').selectize({
                      valueField: 'url',
                      labelField: 'name',
                      searchField: 'name',
                      options: [],
                      create: false,
                      render: {
                          option: function(item, escape) {
                              return '&lt;div&gt;' +
                                  '&lt;span class="title"&gt;' +
                                      '&lt;span class="name"&gt;&lt;i class="icon ' + (item.fork ? 'fork' : 'source') + '"&gt;&lt;/i&gt;' + escape(item.name) + '&lt;/span&gt;' +
                                      '&lt;span class="by"&gt;' + escape(item.username) + '&lt;/span&gt;' +
                                  '&lt;/span&gt;' +
                                  '&lt;span class="description"&gt;' + escape(item.description) + '&lt;/span&gt;' +
                                  '&lt;ul class="meta"&gt;' +
                                      (item.language ? '&lt;li class="language"&gt;' + escape(item.language) + '&lt;/li&gt;' : '') +
                                      '&lt;li class="watchers"&gt;&lt;span&gt;' + escape(item.watchers) + '&lt;/span&gt; watchers&lt;/li&gt;' +
                                      '&lt;li class="forks"&gt;&lt;span&gt;' + escape(item.forks) + '&lt;/span&gt; forks&lt;/li&gt;' +
                                  '&lt;/ul&gt;' +
                              '&lt;/div&gt;';
                          }
                      },
                      score: function(search) {
                          var score = this.getScoreFunction(search);
                          return function(item) {
                              return score(item) * (1 + Math.min(item.watchers / 100, 1));
                          };
                      },
                      load: function(query, callback) {
                          if (!query.length) return callback();
                          $.ajax({
                              url: 'https://api.github.com/legacy/repos/search/' + encodeURIComponent(query),
                              type: 'GET',
                              error: function() {
                                  callback();
                              },
                              success: function(res) {
                                  callback(res.repositories.slice(0, 10));
                              }
                          });
                      },
                      onChange: function(value) {
                 alert(value);
            }
                  });
                  &lt;/script&gt;
  </code></pre>