具有相似行为的第二个元素上的JS click事件不会触发

Question

I'm having trouble getting some notification type elements to show and hide accordingly. what i want to acomplish is have two or more popup elements show on page start. then when clicking one element's ".alert-close" block, it shrinks and hides the content, leaving just the ".alert-open" block visible. then on clicking this block, it sizes back up and shows the content. so far so good, this works. same for the second element. closing and showing it works. not for the tricky part. When one of the elements is closed (minimized), i can't register the click on the second element (to minimize this one also). What am I missing? i tried e.preventDefault() and e.stopPropagation() at the end of each query, didn't help. I need to be able to register the click on any number of similar events.

However, there is also the .alert-kill block, this one can be clicked and works on a the second element when the first one is mimized.

Second question, how could i automate this without needing to write the same js for two or more similar elements, only different by id? (the code below is my test code, obviously writing js for each element by id is not correct, but since they have the same classes i cannot use these classes alone to detect the click event as it applies the changes to all elements, i just used two ids now to test the functionality with two elements)

EDIT: removed ids and used just classes. the code now looks like this:

<script  src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<div class="alert-container">
    <div id="alert-offer" class="alert-popup"> 
        <a class="alert-kill" href="#"><i class="fa fa-times-circle" aria-hidden="true"></i></a>          
        <div class="pull-left close-alert">         
            <a class="alert-close" href="#" title="click to shrink"><div class="alert-icon" style="background-image:url('new/images/alert-offer.png');"></div></a> 
            <a class="alert-open hide" href="#" title="click to expand"><div class="alert-icon" style="background-image:url('new/images/alert-offer.png');"></div></a>       
        </div>     
        <div class="row top-10 content-row">
           CONTENT 1
        </div>        
    </div>

    <div id="alert-event" class="alert-popup"> 
        <a class="alert-kill" href="#"><i class="fa fa-times-circle" aria-hidden="true"></i></a>          
        <div class="pull-left close-alert">         
            <a class="alert-close" href="#" title="click to shrink"><div class="alert-icon" style="background-image:url('new/images/avatar.jpg');"></div></a> 
            <a class="alert-open hide" href="#" title="click to expand"><div class="alert-icon" style="background-image:url('new/images/avatar.jpg');"></div></a>       
        </div>     
        <div class="row top-10 content-row">
            CONTENT 2
        </div>        
    </div>
</div>


<script>
var state = "open" ;
$(".alert-container").on("click", ".alert-popup .alert-close", function(e){    
    e.preventDefault();
    if (state !== "open")
        return;

    var $container = $(".alert-popup");            
    var $content = $(".alert-popup .content-row");

    $container.css({
        "right": "-270px",
        "height": "40px",
        "transition": "all 1s ease 0s"
    });
    $content.css({
        "transform":"scale(.5)",
        "transform-origin":"0 0",
        "transition": "all 1s ease 0s"
    });

    state = "close";
    $(e.currentTarget).addClass("hide");            
    $(".alert-popup .alert-open").removeClass("hide");
});

$(".alert-container").on("click", ".alert-popup .alert-open", function(e){    
    var state = "close";
    e.preventDefault();
    if (state === "open")
        return;
    var $container = $(".alert-popup");
    var $content = $(".alert-popup .content-row");
    $container.css({
        "right": "0px",
        "height": "80px",
        "transition": "all 1s ease 0s"
    });
    $content.css({
        "transform":"scale(1)",
        "transition": "all 1s ease 0s"
    });
    state = "open";
    $(e.currentTarget).addClass("hide");
    $(".alert-popup .alert-close").removeClass("hide");
});

$(".alert-container").on("click", ".alert-popup .alert-kill", function(e){            
    $(".alert-popup").css("display","none");            
});
</script>

Answer 1

$(".alert-container").on("click", ".alert-popup .alert-close", function(e){           
        var state = "open" ;
        e.preventDefault();
        if (state !== "open")
            return;

        var $container = $(e.target).closest(".alert-popup");           
        var $content = $container.find(".content-row");    
        var $alert = $container.find(".alert-open");        
        $container.css({
            "right": "-270px",
            "height": "40px",
            "transition": "all 1s ease 0s"
        });
        $content.css({
            "transform":"scale(.5)",
            "transform-origin":"0 0",
            "transition": "all 1s ease 0s"
        });

        state = "close";
        $(e.currentTarget).addClass("hide");            
        $($alert).removeClass("hide");
    });

    $(".alert-container").on("click", ".alert-popup .alert-open", function(e){            
        var state = "close" ;
        e.preventDefault();
        if (state === "open")
            return;
        var $container = $(e.target).closest(".alert-popup");           
        var $content = $container.find(".content-row");
        var $alert = $container.find(".alert-close");
        $container.css({
            "right": "0px",
            "height": "80px",
            "transition": "all 1s ease 0s"
        });
        $content.css({
            "transform":"scale(1)",
            "transition": "all 1s ease 0s"
        });
        state = "open";
        $(e.currentTarget).addClass("hide");
        $($alert).removeClass("hide");
    });

    $(".alert-container").on("click", ".alert-popup .alert-kill", function(e){  
        var $container = $(e.target).closest(".alert-popup");
        $($container).css("display","none");            
    });

This is the final and fully functioning code. in case anyone finds themselves in a similar situation, maybe it will make it easier to get to the correct solution