jQuery each with break example

jQuery, CSS and HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script>
$(document).ready(function(){
var arr_example = [10,20,30,40,50,60,70,80,90,100];
$(".each_ex").click(function(){
    $.each (arr_example, function( index, value ) {
     $(".arr_ex").append(index + " " + value + "<BR>");
     return ( value !== 50 );
    });
});
});
</script>

<style>
.arr_ex{
word-spacing:50px;
padding-left: 5px;
height:200px;
width:100px;
border: solid 1px red;
}
</style>

</head>

<body>
    <button class="each_ex">Execute each method with return</button>
    <div>Index : Value</div>
    <div class="arr_ex">
    
    </div>

</body>
</html>
Index : Value