javascript - Selecting input that is not a parent or child to dropdown in jquery -

so i'm trying value of input champion that's above dropdown val function. here whole fiddle http://jsfiddle.net/84cxtru7/

 function val(elm) {             var championswithextraspells = ["aatrox", "elise", "fizz", "heimerdinger", "jayce", "lee sin", "nidalee", "rek'sai","twisted fate"];              var championname = $(elm).prev("input").find(".championinput").val();             console.log(championname);     }      $(document).ready(function(){          championnumber = 1;         $('a#addchampion').on('click',function(){              $('div#championinput').append(             '<div class="champion" data-id="'+championnumber+'">\                  <a href="#" class="remove">remove</a>\                  <br>\                  <input type="text" class="championinput" list="champions" name="champion[]" placeholder="champion '+championnumber+'">\                  <datalist id="champions"></datalist>\                  <a href="#" class="addspell">add spell</a>\                  <br>\              <div>');          $('div#championinput').on('click', 'a.addspell',function(){             $(             '<div class="spell" data-id="'+$(this).children( "div.change").length+'">\                 <select name="change['+$(this).parent('div').data('id')+'][]" onchange="val(this)">\                    <option value="passive">passive</option>\                    <option value="q" selected>q</option>\                    <option value="w">w</option>\                    <option value="e">e</option>\                    <option value="r">r</option>\                 </select>\                 <input type="text" name="championspell['+$(this).parent('div').data('id')+'][]">\                 <br>\                 <div class="change">\                 <textarea type="text" size="20" name="spelldescription['+$(this).parent('div').data('id')+'][]" placeholder="enter description" />\                     <select name="spellchange['+$(this).parent('.champion').data('id')+'][0][]">\                        <option value="buff">buff</option>\                        <option value="nerf">nerf</option>\                        <option value="new">new</option>\                        <option value="change">change</option>\                        <option value="bugfix">bugfix</option>\                     </select>\                     <a href="#" class="addchange">add change </a>\                     <a href="#" class="removespell">remove spell</a>\                 </div>\             </div>\             ').appendto('.champion[data-id='+$(this).parent('div').data('id')+']');          });     }); 

it should be:

$(elm).closest(".champion").find(".championinput").val(); 

elm(the select) inside div.spell inside div.champion input.championinput placed.

fiddle

^{note have changed location of code in fiddle "onload" "wrap in head". because on load event functions var() , change() declared in load event scope, select's onchange event can't reach them.}