Добавление на страницу с товаром новых кнопок.

Спасибо большое за консультацию, ниже мой код, Может кому будет полезно.

Мой html

<div class="info_div">

        <div class="delivery knopka">
            <span>Доставка</span>
            <div class="hide_info">
                <h3>Москва и Подмосковье</h3>
                <ul>
                <li><strong>Курьером:</strong> по Москве - 200 р, за МКАД (в пределах 40 км) - от 200 до 500 р. от сложности доставки. </li>
                <li><strong>Самовывоз:</strong> Москва, м. Щелковская, ул. Алтайская 12 - бесплатно.</li>
                </ul>
                <h3>Другие регионы России</h3>
                <p>Доставка в другие города России производиться компаниями:</p>
                <ul class="hide_info_delivery">
                <li><span class="sdek">СДЕК</span></li>
                <li><span class="business_line">Деловые Линии</span></li>
                <li><span class="post_russia">Почтой России</span></li>
                </ul>
                <p>Стоимость доставки товара согласно тарифов ТК.</p>
            </div>
        </div>
       
        <div class="pay knopka">
            <span>Оплата</span>
            <div class="hide_info">
                <h3>Наличными</h3>
                <p>Вы можете расплатиться наличными при:</p>
                <ul>
                <li>Доставке курьером</li>
                <li>Забирая товар со склада (самовывоз)</li>
                <li>Заказав доставку с наложенным платежом (вся Россия)</li>
                </ul>
                <h3>Онлайн оплата</h3>
                <ul>
                    <li>Сбербанк Онлайн</li>
                </ul>
            </div>
        </div>

    </div>

Стили css

.info_div {
    display: flex;
    justify-content: flex-start;
}

    .knopka {
        position: relative;
        cursor: help;
        padding: 15px 15px 15px 45px;
        border-bottom: 1px solid #dcdcdc;
    }
        .knopka span{
            font-size: 18px;
        }
        .delivery{
            background: url(89735_3.png) no-repeat scroll 0 center;
        }
        .pay{
            background: url(cb010d81724fbea1f551843c7bb762af.png) no-repeat scroll 5px center;
        }
        .hide_info {
            width: 500px;
            display: none;
            right: 0;
            top: 45px;
            border: 1px solid #dcdcdc;
            padding: 0 15px;
            position: absolute;
            background-color: #ffffff;
            z-index: 1;
        }
            .hide_info_delivery li{
            list-style: none;
            margin-bottom: 20px;
            }
            .hide_info_delivery li span{
                font-size: 16px;
                padding-top: 5px;
                padding-bottom: 5px;
            }
                .post_russia{
                background: url(Russian_Post.png) no-repeat scroll 0 center;
                padding-left: 125px;
                }
                .sdek{
                background: url(cdek.png) no-repeat scroll 0 center;
                padding-left: 125px;
                }
                .business_line{
                background: url(dl_logo.png) no-repeat scroll 0 center;
                padding-left: 125px;
                }   
        .knopka:hover .hide_info {
        display: block;
        }
     
        @media (max-width: 767px){
            .info_div {
                display: block;
            }
            .hide_info {
                width: 100%;
            }
        }