jquery ui spinner 사용시 오류가 발생하네요

그냥 아이디값(#spinner)으로 사용하면 문제가 없는데

클래스(.spinner)로 바꾸니 정상적으로 출력이 되고있지않습니다.

단지 좌우 2px짜리 점으로만 출력되네요

CSS로 영역 제대로 잡아도 스피너가 작동을 안해서 문제입니다.

현재 스크립트 코드가 </body>태그 바로 위에 위치해있고

jQuery(document).ready(function(){
   jQuery( ".spinner" ).spinner();
});

코드자체가 틀린건 없어보이는데 이상하네요..

아이디값을 쓰지않고 클래스값으로 스피너를 사용하려는 이유는 

루프문안에서 스피너를 여러개 사용하기위함입니다.

function get_group_setting() {
  $get_section = get_post_meta( get_the_ID(), 'group_setting');
  if ( $get_section ) {
    echo '<form class="form_group">
        <ul>';
    foreach ($get_section as $field) {
      $values = explode( ' | ', $field );
      echo  '<li><input type="radio" value="' . $values[2] .' " name="select_group" />' . $values[0] . ', ' . $values[1] . ', ' . $values[2] . ' <input class="spinner" name="value_1"></li>';
}
echo    '
        </ul>
    </form>';
}
}

이게 현재 제 루프문입니다

틀린건 없는거같은데 왜 정상작동을 안하는지 의문이네요..

https://stackoverflow.com/questions/55798674/jquery-ui-spinner-not-work-when-using-class

스택오버플로에도 같은 질문을 올려봤는데 아직 도움될만한 답변을 못받았습니다

보시고 뭐가 문제인지 알게되시면 답변 부탁드리겠습니다.

콘솔에 에러로그도 안나와서 더 힘드네요..