如何填写第一个textarea时，如何制作第二个textarea

I want to make desg textarea as required only if name textarea is filled.

<textarea class="form-control" rows="5" id="name"  name="name" onkeyUp="document.getElementById('ref15').innerHTML = this.value"></textarea>

<textarea class="form-control" rows="5" id="desg" name="desg" onkeyUp="document.getElementById('ref16').innerHTML = this.value"></textarea>

In the keyup event of #name check it's value. If value exist then add required attribute to #desg else remove.

$('#name').keyup(function() {
    $('#ref15').html(this.value);

    var desg = $('#desg');

    if (this.value.trim()) {
        desg.attr('required', 'required');
    } else {
        desg.removeAttr('required');
    }
});

$('#desg').keyup(function() {
    $('#ref16').html(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="form-control" rows="5" id="name" name="name"></textarea>
<textarea class="form-control" rows="5" id="desg" name="desg"></textarea>

</div>