vb.net - jquery confused with multiple DropDownLists in same class name -

i have more 1 dropdownlistfor generated in partial view following:

in loop:

 @html.action("listunpairedpermissions", item) 

the partial view code:

<div>     @if ctype(model, ienumerable(of usermodel.permission)).count > 0     @html.dropdownlistfor(function(r) ctype(model, ienumerable(of usermodel.permission)).lastordefault.permission_id, new selectlist(model, "permission_id", "permission_description"), "--select--", new {.class = "pid"})         html.validationmessagefor(function(m) m.singleordefault.permission_id)       else     @<p>this role has permissions</p>      end if </div> 

my jquery code:

    $('.addpermission2role').each(function (index) {         $(this).on("click", function () {             var tr = $(this).closest('tr');             var _role_id = tr.find('.roleidclass').attr('roleidtd');              var _permission_id = $('.pid').val();             var _parameters = { id: _role_id, permissionid: _permission_id };             $('.pid').change();             $.ajax({                 url: "/adminusers/addpermission2role",                 type: "get",                 data: _parameters,                 success: function (data, textstatus, jqxhr) {                     $('#roletopermtable').html(data);                 }               });         });     }); 

rendered html:

<div> <select class="pid" data-val="true" data-val-number="the field permission_id must number." data-val-required="the permission_id field required." id="permission_id" name="permission_id"><option value="">--select--</option> <option value="0">admin-create</option> <option value="1009">test_perm</option> </select></div> <input type="button" class="addpermission2role" value="add permission">  ...  <div> <select class="pid" id="permission_id" name="permission_id"><option value="">--select--</option> <option value="3">adminusers-roleindex</option> <option value="4">adminusers-rolemanage</option> <option value="5">adminusers-addroletouser</option> <option value="6">adminusers-deleteuserrolereturnpartialview</option> <option value="7">adminusers-permissionindex</option> <option value="8">adminusers-addpermission</option> <option value="41">adminusers-usersroleindex</option> <option value="1008">adminusers-addrole</option> <option value="1009">test_perm</option> <option value="1010">adminusers-listunpairedpermissions</option> <option value="1011">adminusers-addpermission2role</option> <option value="1012">adminusers-deletepermissionfromrole</option> </select> </div> <input type="button" class="addpermission2role" value="add permission"> 

now when select value second list, jquery doesn't pick selected value. however, if select first list , hit button second list, value correctly!

my question how can unique dropdown list each has own submission button? in word, how can jquerycode able differentiate between lists if have same class name accordingly buttons?

everything contains same id, never work either.

what typically provide objects nonmapped htmlid property contains object.typename + object.id concatenated, e.g. 'persmissionlist1', 'permissionlist2', , use in partial views id whenever need unique 1 specific one.