Денис Инешин

fotorama.io

В CSS нет понятия слева и справа. Есть поток элементов.
Ваша задача изначально пахнет плохим проектированием. Никогда не используйте такие конструкции в реальных проектах, за исключением случаев, когда супер точно понимаете что делаете и зачем.

В вашем случае вы должны еще на стадии построения шаблона задать элементам нужные классы, и на их основе описывать поведение.

Самое главное в хорошей библиотеке - это ваше желание ее поддерживать. Прежде всего оформите проект как следует: GitHub + хорошее описание (примеры API, демки) + немного дизайнерской работы, чтобы привлечь внимание (хорошее лого по крайней мере). Напишите тесты.

Далее о проекте можно будет написать, хоть на тот же хабр. Но учтите, на хабре сразу же посмотрят вашу библиотеку, кто-то ее проверит и будет очень плохо, если она не работает или содержит баги.

Обязательно загуглите конкурентов, вы должны обосновать почему ваша библиотека лучше и знать свои слабые и сильные стороны чтобы написать о них. Люди очень косервативны, и если они уже используют что-то еще, то будет очень трудно переубедить их переключиться на ваше решение.

Назовите каждый попап индивидуальным именем. Например с помощью id.

<div id="popup_1">...</div>
<div id="popup_2">...</div>

Сделайте на кнопках открытия ссылки на эти попапы, например с помощью data-атрибутов:

<button class="time-work" data-popup="popup_1">Open 1</button>
<button class="time-work" data-popup="popup_2">Open 2</button>

Немного модифицируйте обработчик кликов, чтобы открывать только нужный:

$('.time-work').on("click", function () {
    var target = $(this).data("popup");
    $("#" + target).show();
});

Это решение хорошо тем, что не нужна вложенность попапов в кнопки их открытия. Попапчики могут лежать совершенно в любом месте.

Вам поможет Flexbox

Конечно же воспользоваться лучшей библиотекой для работы со временем Moment.js.

Выбирайте