title: Finding closest input text after select dropdown was chosen
body: <p>So what I'm trying to do is change value of the input with id championSpell[] whenever something from dropdown select name="change[]" id="change[]  is chosen. Inputs are generated dynamically. Test variable in function val() is responsible for that change and is the one I have problems with.</p>
  
  <pre><code>&lt;script src="LeagueNotes/js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="LeagueNotes/js/champions_list.js"&gt;&lt;/script&gt;
  &lt;script src="LeagueNotes/js/jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
      * { font-family:Arial; }
      h2 { padding:0 0 5px 5px; }
      h2 a { color: #224f99; }
      a { color:#999; text-decoration: none; }
      a:hover { color:#802727; }
      p { padding:0 0 5px 0; }
  
      input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }
  &lt;/style&gt;
  
  &lt;h2&gt;
      &lt;a href="#" id="addChampion"&gt;Add Another Champion&lt;/a&gt;
  &lt;/h2&gt;
  &lt;form name="second_form" id="second_form" action="#" method="POST" style="margin: 0;"  &gt;
      &lt;div id="p_scents"&gt;
          &lt;p&gt;    
              &lt;label for="p_scnts"&gt;
                  &lt;input type="text" id="champion[]" size="20" list="champions" value=""  placeholder="Enter Champion's name"&gt;
                  &lt;datalist id="champions"&gt;&lt;/datalist&gt;
                  &lt;a href="#" id="addGeneral"&gt;Add General Change&lt;/a&gt;&lt;a&gt;&lt;/a&gt;
                  &lt;a href="#" id="addSpell"&gt; Add Spell&lt;/a&gt;&lt;a&gt;&lt;/a&gt;
  
              &lt;/label&gt;
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;br/&gt;&lt;input type="submit" value="submit"&gt;
  &lt;/form&gt;
  &lt;script&gt;
      for(var key in champions){
                  if(champions.hasOwnProperty(key)){
                      $('#champions').append('&lt;option value="' + key + '"&gt;');
  
                  }
              }
      var config = {
                        fillAll: true
                      };
  
                      document.forms["second_form"].oninput = function(e) {
                        var champion = this["champion[]"];
  
                        //Force into array
                        if (champion[0] === undefined)
                          champion = [this["champion[]"]];
  
                        var reached = {
                          valid: 0,
                          unique: 0
                        };
  
                        var inputs = [].map.call(champion, function(n) {
                          return n.value
                        }).filter(function(n) {
                          return n.length
                        });
  
                        var valid = [].every.call(champion, function(n, i) {
                          n.setCustomValidity("");
                          if (config.fillAll) return (reached.valid = i, champions.hasOwnProperty(n.value));
                          else return n.value ? (
                            reached.valid = i,
                            champions.hasOwnProperty(n.value) &gt; -1
                          ) : true;
                        });
  
                        var unique = inputs.slice(0).sort().every(function(n, i, a) {
                          reached.unique = inputs.lastIndexOf(n);
                          return n != a[i - 1];
                        });
  
                        //Check for valid champions
                        if (!valid) {
                          champion[reached.valid].setCustomValidity("This is not a valid champion, please correct this field and resubmit.")
                        }
  
                        //Check for duplicates
                        if (!unique) {
                          champion[reached.unique].setCustomValidity("This champion has already been entered.")
                        }
  
                        this.checkValidity();
                      };
  
      function change(x, dblchamp){
          if(dblchamp===true){
              if(x==="Passive"){x=0;}
              if(x==="Q"){x=1;}
              if(x==="Q2"){x=2;}
              if(x==="W"){x=3;}
              if(x==="W2"){x=4;}
              if(x==="E"){x=5;}
              if(x==="E2"){x=6;}
              if(x==="R"){x=7;}
              if(x==="R2"){x=8;}
  
  
          }else if(dblchamp===false){
              if(x==="Passive"){x=0;}
              if(x==="Q"){x=1;}
              if(x==="W"){x=2;}
              if(x==="E"){x=3;}
              if(x==="R"){x=4;}
          }
          console.log(x);
          return x;
      }
      function val(elm) {
          var championsWithExtraSpells = ["Aatrox", "Elise", "Fizz", "Heimerdinger", "Jayce", "Lee Sin", "Nidalee", "Rek'Sai","Twisted Fate"];
          //var championName = $("#change").closest('input').val();
          //var championName =$("#champion\\[\\]").val();
           var championName = $(elm).closest("label").find("input").val();
          //document.getElementById("champion[]").value;
          console.log(championName);
  
          if($.inArray(championName, championsWithExtraSpells)==-1){
              var existsInArray = false;}
          else{
              var existsInArray = true;}
           var d = $(elm).val();
          var spellname = document.getElementById("championSpell[]");
          var z = champions[""+championName+""][change(d, existsInArray)];
          test =  $(elm).nextAll("input").first().val('test'); 
          test.value=champions[""+championName+""][change(d, existsInArray)];
  
      }
  
      $(function() {
          var scntDiv = $('#p_scents');
          var i = $('#p_scents label').size() + 1;
          var j =0;
          $('body').on('click', '#addChampion', function() {
              $('&lt;p&gt;&lt;a href="#" id="remScnt"&gt;Remove&lt;/a&gt;&lt;br&gt;&lt;label for="p_scnts"&gt;&lt;input type="text" id="champion[]" size="20" list="champions" name="champion[]" value="" placeholder="Enter Champion\'s name" /&gt;&lt;datalist id="champions"&gt;&lt;/datalist&gt;&lt;a href="#" id="addGeneral"&gt;Add General Change&lt;/a&gt;&lt;a href="#" id="addSpell"&gt; Add Spell&lt;/a&gt;&lt;a&gt;&lt;/a&gt;&lt;/label&gt;&lt;/p&gt;').appendTo(scntDiv);
                  i++;
                  return false;
          });
  
          $('body').on('click', '#remScnt', function() { 
                  if( i &gt;2 ) {
                          $(this).parents('p').remove();
                          i--;
                  }
                  return false;
          });
  
           $('body').on('click', '#addGeneral',function() { 
                 $(
                 '&lt;p&gt;&lt;label for="var"&gt;&lt;textarea type="text" id="champion[]" size="20" name="GeneralChange[]" value="" placeholder="Enter Description" /&gt;&lt;select&gt;&lt;option value="buff"&gt;Buff&lt;/option&gt;&lt;option value="nerf"&gt;Nerf&lt;/option&gt;&lt;option value="new"&gt;New&lt;/option&gt;&lt;option value="change"&gt;Change&lt;/option&gt;&lt;option value="bugfix"&gt;Bugfix&lt;/option&gt;&lt;/select&gt;&lt;/label&gt; &lt;a href="#" id="remVar"&gt;Remove Change&lt;/a&gt;&lt;/p&gt;').appendTo($(this).next()); 
                  j++;
                  return false;
          });
  
  
          $('body').on('click', '#remVar',function() { 
                          $(this).parent('p').remove();
                  return false;
          });
  
          $('body').on('click', '#addSpell',function() { 
                 $(
                 '&lt;p&gt;&lt;select name="change[]" id="change[]" onchange="val(this)"&gt;&lt;option value="Passive"&gt;Passive&lt;/option&gt;&lt;option value="Q" selected&gt;Q&lt;/option&gt;&lt;option value="W"&gt;W&lt;/option&gt;&lt;option value="E"&gt;E&lt;/option&gt;&lt;option value="R"&gt;R&lt;/option&gt;&lt;/select&gt;&lt;label for="var"&gt;&lt;input type="text" id="championSpell[]" readOnly="true"&gt;&lt;br&gt;&lt;textarea type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Enter Description" /&gt;&lt;select&gt;&lt;option value="buff"&gt;Buff&lt;/option&gt;&lt;option value="nerf"&gt;Nerf&lt;/option&gt;&lt;option value="new"&gt;New&lt;/option&gt;&lt;option value="change"&gt;Change&lt;/option&gt;&lt;option value="bugfix"&gt;Bugfix&lt;/option&gt;&lt;/select&gt;&lt;/label&gt; &lt;a href="#" id="addGeneral"&gt;Add Change&lt;/a&gt; &lt;a href="#" id="remVar"&gt;Remove Spell&lt;/a&gt;&lt;/p&gt;').appendTo($(this).next());
                  return false;
          });
  });
  &lt;/script&gt;
  </code></pre>