<div class="header_div"><b>Names</b></div>

<div class="names_div">
    <div class="a_letter">Aashay</div>
    <div class="a_letter">Aashish</div>
    <div class="a_letter">Abdul-Azeez</div>
    <div class="a_letter">Abdul-Baari</div>
    <div class="a_letter">Abdul-Ghafoor</div>
    <div class="a_letter">Abdul-Haafiz</div>
    <div class="a_letter">Abdul-Hameed</div>
    <div class="a_letter">Abhayaprada</div>
    <div class="a_letter">Abheek</div>
    <div class="a_letter">Abhi</div>
    <div class="b_letter">Baahir</div>
    <div class="b_letter">Baalaark</div>
    <div class="b_letter">Baanbhatt</div>
    <div class="b_letter">Baanke Bihaari</div>
    <div class="b_letter">Baasim</div>
    <div class="b_letter">Babala</div>
    <div class="b_letter">Badal</div>
    <div class="c_letter">Chaanakya</div>
    <div class="c_letter">Chaaruchandra</div>
    <div class="c_letter">Chaarudatt</div>
    <div class="c_letter">Chaaruhaas</div>
    <div class="c_letter">Chahel</div>
    <div class="c_letter">Chaitan</div>
    <div class="d_letter">Daamodar</div>
    <div class="d_letter">Daaruk</div>
    <div class="d_letter">Daarun</div>
    <div class="d_letter">Dahana</div>
    <div class="d_letter">Daha</div>
    <div class="d_letter">Daitya</div>
    <div class="d_letter">Daivya</div>
    <div class="d_letter">Daiwik</div>
    <div class="e_letter">Eashan</div>
    <div class="e_letter">Ebadaah</div>
    <div class="e_letter">Edhas</div>
    <div class="e_letter">Edi</div>
    <div class="e_letter">Ednit</div>
    <div class="e_letter">Eeshwar</div>
    <div class="e_letter">Egaiarasu</div>
    <div class="e_letter">Eha</div>
</div>

<div id="start_at_div" class="range_selector">
    Start at:
    <div>
        <input type="radio" name="start_at" checked value="97" />A</div>
    <div>
        <input type="radio" name="start_at" value="98" />B</div>
    <div>
        <input type="radio" name="start_at" value="99" />C</div>
    <div>
        <input type="radio" name="start_at" value="100" />D</div>
    <div>
        <input type="radio" name="start_at" value="101" />E</div>
</div>

<div id="end_at_div" class="range_selector">
    End at:
    <div>
        <input type="radio" name="end_at" checked value="97" />A</div>
    <div>
        <input type="radio" name="end_at" value="98" />B</div>
    <div>
        <input type="radio" name="end_at" value="99" />C</div>
    <div>
        <input type="radio" name="end_at" value="100" />D</div>
    <div>
        <input type="radio" name="end_at" value="101" />E</div>
</div>

<button id="do_filter">Show</button>

$(function(){
    $("#do_filter").click(function(){
       var start_range = $("#start_at_div input:radio[name=start_at]:checked").val();
       var end_range = $("#end_at_div input:radio[name=end_at]:checked").val();
       
       if (start_range > end_range){
         alert("Invalid range");
       }
       else {
         $(".names_div div").hide();
         for (var i=start_range;i<=end_range;i++){
            $(".names_div div."+String.fromCharCode(i)+"_letter").show();
         }
       }
    });
});

.range_selector {
   display: block;
}

.range_selector div {
   display: inline-block;
}

.names_div {
   margin: 10px 0px;
}

.header_div {
   font-family: arial;
   font-size: 22px;
}