Я пытаюсь выполнить условие в JQuery для оценки навыков пользователя, но я просто получаю первое, если утверждение работает правильно

Question

Это мой код, использующий html и jQuery, проблема в том, что код работает правильно, но когда я пытаюсь просмотреть рейтинг, рейтинг неверен, как если бы утверждение .и изображение показывает проблему, любой намек, пожалуйста или решение ....

Проблема с кодом Jquery Я не мог получить правильное утверждение if, я думаю, что часы работают в первом случае, если условие и не 'т с другими вариантами, потому что foreach я тоже думаю.

          <c:forEach var="item" items="${r3}">
             <ul>`<p > ${item.skillsname}</p> `

           <div class="progress resume-progress">






               `<div id="progressbars" class="progress-bar theme-progress-bar-dark" role="progressbar" style="width:98%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> 
                <div id="ratingval" ><p id="userrating" value="${item.rating}">${item.rating}</p></div>
          </div>

                <script>
                   $(document).ready(function() {

                    if ($("#userrating").val('Beginner')) {
                        $("#progressbars").css('width','150px');
                    }else if ($("#userrating").val('Intermediate')) {
                        $("#progressbars").css('width','200px');
                    }else if ($("#userrating").val('Advanced')) {
                        $("#progressbars").css('width','300px');
                    }else {$("#progressbars").css('width','400px');}
                    $("#userrating").each().prototype;

                  });
                </script>

         </li></ul>
         this foreach using for loop ......
           </c:forEach>`