Invalid up and down small icons for unified class name under jquery

now a page has two parts with invalid icons up and down, which means to encapsulate it.
all define class as item-up,item-down.
however, it is found that only the first top icon is invalid, and the second bottom icon is invalid.
cannot invalidate each piece in its own way.
the top and bottom are invalid only if the class is different.
now wants to unify the definition on html"s class, that is, item-up,item-down. But do not know how to write here in jquery how to judge ah, if the future page is three, four?
in short, if the name of the class class remains the same, you want to encapsulate it.

the current html view is as follows

1<button type="button"  class="btn btn-primary btn-xs angle-up item-up-1"><i class="fa fa-angle-up" aria-hidden="true"></i></button> 
1<button type="button"  class="btn btn-primary btn-xs angle-down item-down-1"><i class="fa fa-angle-down" aria-hidden="true"></i></button>

2<button type="button"  class="btn btn-primary btn-xs angle-up item-up-2"><i class="fa fa-angle-up" aria-hidden="true"></i></button> 
2<button type="button"  class="btn btn-primary btn-xs angle-down item-down-2"><i class="fa fa-angle-down" aria-hidden="true"></i></button>

want to unify all class into

class="btn btn-primary btn-xs angle-up item-up"
class="btn btn-primary btn-xs angle-up item-down"

now the jq is as follows. I don"t know how to write

$(document).ready(function(){
    $(".item-up").eq(0).prop("disabled", true);
    $(".item-down").eq(-1).prop("disabled", true);  
  
});

$(function() { $.each($('.content'), function(index, section) { var $section = $(section); // $section.find('.btn').prop('disabled', false); // up $section.find('table tbody tr').first().find('.item-up').prop('disabled', true); // down $section.find('table tbody tr').last().find('.item-down').prop('disabled', true); }); });