JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="marketplace_product_pay">
    <div class="products_form">
        <div class="products_b">
            <div class="products_bt"><i class="fa fa-money"></i> Цена</div>
            <div class="products_bi">520.00 <i class="fa fa-rub"></i>
            </div>
        </div>
        <div class="products_b">
            <div class="products_bt"><i class="fa fa-university"></i> Ваш баланс</div>
            <div class="products_bi">10155.00 <i class="fa fa-rub"></i>
            </div>
        </div>
        <div class="products_b" style="background:#1abc9c;">
            <div class="products_bt" style="color:#ffffff;"><i class="fa fa-university"></i>  <i class="fa fa-credit-card"></i> Баланс после покупки</div>
            <div class="products_bi" style="color:#ffffff;">9635.00 <i class="fa fa-rub"></i>
            </div>
        </div>
        <div class="products_b">
            <div class="products_bt"><i class="fa fa-lock"></i> В наличии</div>
            <div class="products_bi"><strong>100</strong> копий</div>
        </div>
        <div class="products_b">
            <div class="products_bt"><i class="fa fa-gavel"></i> Продано</div>
            <div class="products_bi"><strong>9</strong> копий</div>
        </div>
        <div class="dop_info" data-dop_info_sum="3">
            <div class="products_b">
                <div class="products_bt">Доменное имя вашего сайта</div>
                <div class="products_bi">
                    <input type="text" name="dop_info_1" class="dop_info_f" value="value 1">
                </div>
            </div>
            <div class="products_b">
                <div class="products_bt">Контакт для связи</div>
                <div class="products_bi">
                    <input type="text" name="dop_info_2" class="dop_info_f" value="value 2">
                </div>
            </div>
            <div class="products_bca">
                <div class="products_bcb">Дополнительная информаци</div>
               ...

CSS

/*marketplace products*/
 .marketplace_products {
    background: #F0F0F0;
    border: 2px solid #D5D5D5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 8px 10px -8px rgba(87, 87, 87, 0.75);
    -moz-box-shadow: 0 8px 10px -8px rgba(87, 87, 87, 0.75);
    box-shadow: 0 8px 10px -8px rgba(87, 87, 87, 0.75);
    display: inline-block;
    font-size: 0;
    margin: 4px;
    vertical-align: top;
    width: 385px;
}
.ui-widget-overlay {
    background: rgba(63, 94, 109, 0.33);
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    top: 0;
}
#dlepopup_m.marketplace_product_popup {
    padding: 0;
}
.marketplace_product_pay {
    background: #F0F0F0;
    border: 2px solid #D5D5D5;
    display: block;
    font-size: 0;
    margin: 2px 0 0;
    vertical-align: top;
    width: 596px;
}
.products_form .products_b {
    background: #fff;
    border-bottom: 1px solid #D5D5D5;
    color: #646464;
}
.products_form .products_pgd {
    background: #D5D5D5;
    border-bottom: 1px solid #D5D5D5;
    color: #000000;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}
.products_form .products_bca {
    background: #DAEBFF;
    border-bottom: 1px solid #D5D5D5;
    color: #646464;
    padding: 4px 0;
    text-align: center;
}
.dop_info .products_bca {
    background: #ffffff;
}
.dop_info .products_bca textarea {
    background: #F0F0F0;
    border: 1px solid #cccccc;
    -moz-box-shadow: inset 0px 3px 6px -3px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: inset 0px 3px 6px -3px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0px 3px 6px -3px rgba(0, 0, 0, 0.25);
    height: 50px;
    padding: 4px 8px;
    min-height: 50px;
    max-height: 150px;
    width: 570px;
    min-width: 570px;
    max-width: 570px;
}
.products_form .products_bca input {
    border: 1px solid #448EDD;
    border-right: 0 solid #448EDD;
    font-size: 14px;
    padding: 0 5px;
    text-align: center;
    vertical-align:...

JavaScript

var $doc = $(document);

$doc.on('click', '[data-mp-pay-id]', function () {
    var $data = $(this).data(),
        id = $data.mpPayId,
        id_purchase = $data.mpId_purchase,
        s = JSON.stringify( $('.dop_info input,.dop_info textarea').serializeArray() );
        
        alert(s);

    //marketplaceAjax(id, false, false, false, id_purchase, "marketplacepaygo");

});


function marketplaceAjax(id, price, input, coupon, id_purchase, ajaxaction, name) {

    alert(id + " - " + price + " - " + input + " - " + coupon + " - " + id_purchase + " - " + ajaxaction + " - " + name);

};