Select next HTML specific element - jquery

Question

I have this code:

<section class="col col-md-4">
<label class="checkbox">                                                       
<input type="checkbox" name="subscription" class="chk_Especialization" value="1">
</label>
</section>  

<section class="col col-md-4">
    <label class="input">
        <input type="text" class="dateRangestart start dateRange" id="start-1" placeholder="dtStart">
    </label>
</section>
<section class="col col-md-4">
    <label class="input">
        <input type="text" class="dateRangefinish finish dateRange" id="finish-1" placeholder="dtEnd">
    </label>
</section>



<section class="col col-md-4">
<label class="checkbox">                                                      
<input type="checkbox" name="subscription" class="chk_Especialization" value="2">
</label>
</section>  

<section class="col col-md-4">
    <label class="input">
        <input type="text" class="dateRangestart start dateRange" id="start-2" placeholder="dtStart">
    </label>
</section>
<section class="col col-md-4">
    <label class="input">
        <input type="text" class="dateRangefinish finish dateRange" id="finish-2" placeholder="dtEnd">
    </label>
</section>


<section class="col col-md-4">
<label class="checkbox">                                                        
<input type="checkbox" name="subscription" class="chk_Especialization" value="3">
</label>
</section>  

<section class="col col-md-4">
    <label class="input">
        <input type="text" class="dateRangestart start dateRange" id="start-3" placeholder="dtStart">
    </label>
</section>
<section class="col col-md-4">
    <label class="input">
        <input type="text" class="dateRangefinish finish dateRange" id="finish-3" placeholder="dtEnd">
    </label>
</section>

I want alert id of the next input element if I click over a class start input element, and alert id of the previous input element if I click over a finish class element.

I have tried use this post JQuery: Closest div that has an ID and this one jquery, find next element by class but I think there is some error in my code.

this is the javascript code:

$(document).on("click", ".dateRange", function(){
    if($(this).hasClass( "start" )){
        //Select next input element with finish class
        alert($(this).closest('input').next().attr("id"));
    }
    if($(this).hasClass( "finish" )){
        //Select previous input element with start class
        alert($(this).closest('input').prev().attr("id"));
    } 
});   

I have create a jsfiddle to :http://jsfiddle.net/towx8xro/1/

Any idea what is going wrong?

Answer 1

Your selector should find the closest section element, and then either go forward or backwards to find the related start/end input using prev and next respectively. Try this:

$(document).on("click", ".dateRange", function () {
    var $el = $(this);
    if ($el.hasClass("start")) {
        alert($el.closest('section').next().find('input').prop("id"));
    }
    if ($el.hasClass("finish")) {     
        alert($el.closest('section').prev().find('input').prop("id"));
    }
});

Updated fiddle