动态行不起作用，只是第一行工作正常，而其他行的css消失了

Question

我正在尝试对电影进行评级，但是当我试图添加另一个字段来对css进行评级时，评级css仅出现在第一个值上的问题消失了。

这是我的jQuery代码

<script>    
$(document).ready(function() {
    var max_fields      = 20;
    var wrapper         = $("#form_user");
    var add_button      = $("#buttonpersonalinfo");

    var x = 1;

    $(add_button).click(function(e) {
        e.preventDefault();

        if(x < max_fields) {
            x++;

            $(wrapper).append('<div class="skills_option2"><div><h3>Skill, description (e.g. Editing skills - excellent) </h3><input type="text" placeholder="language " id="schoo_name"name = "skillsname"> <h2>Skills rating</h2> <div class="br-wrapper br-theme-fontawesome-stars"><select id="example-movie" name="rating" autocomplete="off"><option value="Beginner">Beginner</option><option value="Intermediate">Intermediate</option><option value="Advanced" selected="selected">Advanced</option><option value="Expert">Expert</option></select></div></div><i id = "close" class="fa fa-close"></i> </div>');
       }
       else
       {
           alert('You Reached the limits');
       }
    });
}
</script>

这是html标记：

<div class="skills_option">
        <div>
            <h3>Skill, description (e.g. Editing skills - excellent) </h3>
            <input type="text" placeholder="language " id="schoo_name" name = "skillsname">
            <h2>Skills rating</h2>
            <div class="br-wrapper br-theme-fontawesome-stars">
            <select class ="example-movie"id="example-movie" name="rating" autocomplete="off">

              <option value="Beginner">Beginner</option>
              <option value="Intermediate">Intermediate</option>
              <option value="Advanced" selected="selected">Advanced</option>
              <option value="Expert">Expert</option>
            </select>
          </div>
            </div>
        </div>