Q:

Select box on change event in Bootstrap Modal Window

I am using bootstrap 3. There is a select box inside the modal window. On change event of that select box i have to display its value at console. First time the value is correct but after that no value is shown on change event. Here is my code.
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    <h4 class="modal-title">Class</h4>
</div>
<div class="modal-body">
    <form>
      <div class="form-group">
        <select name='class' id='class'>
        <option value='Class 1'>1</option>
        <option value='Class 2'>2</option>
        <option value='Class 3'>3</option>
        <option value='Class 4'>4</option>
        </select>
      </div>
    </form>
</div>
<script>
var class = $('#class');
class.on('change', function (e) {
    console.log(this.value);
});
</script>

Can anyone help me out..where I am wrong.
Note: The code is working first time without any problem. But when I close the modal & open the modal again without page refresh then no value is shown at console. If page is refreshed then its working.

A:

Here is the working fiddle for you.
Please avoid using reserved keyword as variable, class or id names.[https://jsfiddle.net/4s5mkbj8/2/]
$('#class').on('change', function (e) {
    console.log(this.value);
});

