Why doesn't "hide" work on non-first elements?

Question

JavaScript

On the right picture, I hide (or open) the lower element of the diva, but for some reason, if I create another element using the button, then the lower element can no longer be hidden or opened ...
How can I fix this?

Answer 1

Every time you add a new element to #list-caseyou assign click handlers to all existing .imgand .show, not just newly created ones. If two (or four, or six, or ...) handlers that execute toggleClass fire, then the final state will not differ from the initial one. Hence your seeming "doesn't work".
You don't need to assign any handlers when adding .case, do it once using delegation:

$('#list-case')
  .on('click', '.img', function() {
    $(this).closest('.case').remove();
  })
  .on('click', '.show', function() {
    $(this).toggleClass('none').closest('.case').find('.case-bottom').toggleClass('invise');
  });

Answer 2

The simplest thing is to add a numbering to each container and when you click on a specific block, hide it by this numbering!