jQuery: Find next Element with same class

A technique that won't break if you change the structure of the HTML is to:

1. Use .index() to find the container in a list of all the containers
2. Increment the index
3. Call .eq() to select the next container regardless of where it is in the DOM

JavaScript:

const next = (event) => {
   const list =   $('.calculationContainer');   //all containers
   const index =  list.index($(event.target));  //current container
   const target = (index + 1) % list.length;    //increment with wrap
   const nextAmountCalculationContainer = list.eq(target);
   };
$('.calculationContainer').click(next);

See if you can catch the red button:
https://jsfiddle.net/55pmmzd6/68

Try This :-

$('.calculationContainer').on('click', function() {
    var $elem = $(this).closest('div.body').next().find('div.calculationContainer')    
});

Use .closest() to traverse up and find first div.body parent and then use .next() to get next element and then find div.calculationContainer with .find().

Handle the situation when .calculationContainer is at last position(as shown in demo).

DEMO