JQuery: append/remove required asterisk to required field

Question

Trying to write a JQuery function to append a required asterisk to a required field triggered on condition. And I thought this .append statement would work but it doesn't.

Jquery:

       function checkRequiredField(){
                var someId = $('#Id').val();
                if (someId == 106587){          //value to trigger
                    $('#someNumberField').prop('required',true);
     THIS LINE -->  $('#someNumberField-label').append('<span class="required-indicator">*</span>');
                }else{
                    $('#someNumberField').removeAttr('required');
                    $('#someNumberField-label').remove('<span class="required-indicator">*</span>');
}

HTML:

<div class="form-group">
    <label id="SomeId-label" class="col-sm-2 control-label" for="SomeId">SomeId<span class="required-indicator">*</span></label>
    <div class="col-sm-5">
        <g:select name="SomeId" noSelection="['null':'']" from=".." value="${106587}" class="form-control" optionKey="id" required="" aria-labelledby="SomeId-label" onchange="checkRequiredField()"/>
    </div>
</div>


<div class="form-group">
    <div class="col-sm-2">
        <label id="someNumberField-label" class="toplabel" for="someNumberField">Number #</label>
        <g:textField name="someNumberField" id="someNumberField" value="${aphis104Instance.someNumberField}" class="form-control" aria-labelledby="someNumberField-label"/>
    </div>
</div>
    }

Answer 1

Try it like this, it should be working.

function checkRequiredField() {
    var someId = $('#Id').val();
    if (someId == 106587) {
        $('#someNumberField').prop('required',true);
        // make sure its getting here... alert("test")
        $('#someNumberField-label').append(
            $("<span>", {"class": "required-indicator"}).text("*")
        );
    } else {
        $('#someNumberField').removeAttr('required');
        $('#someNumberField-label span').remove();
    }
}