并排的图像一个接一个地闪烁

Question

我有2个div。每个div包含4个按钮。单击相应的div按钮并排显示2张图像。我还有一个按钮用于使这些图像闪烁。当单击该按钮时，两者同时闪烁。我试图将它们一次闪烁。我该怎么办？

  

css

@keyframes blinkingFrames {
    0% {opacity: 0.00;}
    50% {opacity: 1.00;}
    100% {opacity: 0.00;}
}


}

.blinking {
    animation-name: blinkingFrames;
    animation-duration: 0.5s;

    animation-iteration-count: infinite;
}

jquery ------------------------

For div-1
 $('.green-button').on('click', function() {
    $('#bar').attr('src', 'flash-green.png');

  });

For div-2
 $('.green-button1').on('click', function() {
    $('#bar1').attr('src', 'flash-green.png');

body ------------------------

<img  id="ba" class="bar1" src="flash-red.png" alt="bar" >
 <img  id="ba1" class="bar1" src="flash-red.png" alt="bar" >


<button id="flash-toggle" onclick="$('.bar1').toggleClass('blinking')">
            Toggle Blinking
        </button>