JQuery get closest div to element

Question

I am trying to show a div closest to select element using this jquery:

$(document).ready(function(e) {
    $('.destination_number').hide();
    $('.destination_select').each(function() {
        update_destination($(this));
    });
    $('.destination_select').on('change', function() {
        update_destination($(this));
    });
});
function update_destination(el) {
    $( $('.destination_select').closest('.destination_number') ).show();
}

With the HTML:

<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <label>On No Answer</label>
            <select name="destination_select" id="destination_select" class="form-control destination_select">
            </select>
        </div><!-- /.form-group -->
    </div><!-- /.col -->
</div><!-- /.row -->
<span class="destination_number" id="test">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label id="destination_number_label">Forward To Number</label>
                <input type="text" name="destination_number" id="destination_number" class="form-control" />
            </div><!-- /.form-group -->
        </div><!-- /.col -->
    </div><!-- /.row -->
</span>

But it's not showing the .destination_number div

There will be multiple divs and select elements with the same classes, and I want to show the .destination_number div that is closest to the .destination_select element

UPDATE

<div class="row">
    <span class="destination_container">
        <div class="col-md-6">
            <div class="form-group">
                <label>On No Answer</label>
                <select name="destination_select" class="form-control destination_select">
                </select>
            </div><!-- /.form-group -->
        </div><!-- /.col -->
    </span>
    <span class="destination_number">
        <div class="col-md-6">
            <div class="form-group">
                <label class="destination_number_label">Destination</label>
                <input type="text" name="destination_number" class="form-control" value="<?php echo (isset($extension["dnumber"]) ? $extension["dnumber"] : (isset($_POST["destination_number"]) ? $_POST["destination_number"] : '')); ?>" />
            </div><!-- /.form-group -->
        </div><!-- /.col -->
    </span>
</div><!-- /.row -->

Added inside function:

el.closest('.destination_number').next('.destination_number_label').text( $(el).find(':selected').attr('data-label') );

Answer 1

closest() only looks for ancestors but what you are looking for is not an ancestor of the <select>

You will need to go up to closest row and then look for it's next sibling

function update_destination(el) {
    el.closest('.row').next('.destination_number') ).show();
}