JSFiddle - React, Tailwind, and code Playground
HTML
<span class="chislo">2000</span>
<!-- Panel -->
<div id="amoney" class="amoney-module" style="text-align: center;">
<div id="amoney1" class="amoney-mod1" style="text-align: center;">
<span class="panel1"><a class="south" href="javascript:void(0);" style="text-decoration: none;" onclick="hide_all()" title="Скрыть все">Благодарность Автору</a></span>
</div>
<div id="amoney2" class="amoney-payment" style="text-align: center;">
<a id="ammh1" class="south" href="javascript:void(0);" title="WebMoney" onclick="show_wm()"></a>
<a id="ammh2" class="south" href="javascript:void(0);" title="RBKMoney" onclick="show_rupay()"></a>
<a id="ammh8" class="south" href="javascript:void(0);" title="ROBOKASSA" onclick="show_robox()"></a>
</div>
</div>
<!-- Webmoney -->
<div id="wm" class="amoney" style="width:100%;height:auto;text-align: center;">
<form id="wm-pay" name="pay" method="post" action="https://merchant.webmoney.ru/lmi/payment.asp" target="_blank">
<div class="cont1" style="text-align: center;">
<div id="ammh15" class="ctynh15" style="text-align: center;"></div>
</div>
<div class="karma1" style="text-align:center"><div class="karma2" style="text-align:center"><span class="letter3">$10000 30% $3000</span><div class="karma3 gray" style="margin:0px auto 0px;"><div class="red" style="width: 30%;float: right;"></div></div><div class="karma4" style="text-align:center"><span class="letter">Обновлено: 27/1/2009</span></div></div></div> <div class="cont1" style="text-align: center;">
<span class="letter">Валюта и сумма:</span>
</div>
<div class="cont1" style="text-align: center;">
<span class="focus-example1">
<input id="wm-pay-1" class="wm-pay-1" type="text" name="LMI_PAYMENT_AMOUNT" size="3" value="10" title="Введите сумму" readonly="readonly" />
</span>
<span class="focus-example">
<select id="wm-pay-2" class="wm-pay-2" name="LMI_PAYEE_PURSE" title="Выбор валюты"...
CSS
@charset "utf-8";#wm,#rupay,#yandex,#egold,#paypal,#libertyreserve,#moneybookers,#robox,#liqpay .amoney div{line-height:normal}.amoney-payment{line-height:normal}#wm-pay,#rupay-pay,#yandex-pay,#egold-pay,#paypal-pay,#libertyreserve-pay,#moneybookers-pay,#robox-pay,#liqpay-pay form{margin:0}.amoney-payment a{background:url('http://i71.fastpic.ru/big/2015/0724/60/6bdd599fbaf7f604949f2ee3ab774560.png') no-repeat;cursor:pointer;display:inline-block;height:17px;width:60px;border:1px dotted #e1e1e1;margin-left:auto;margin-right:auto;text-align:center}.amoney-payment a:hover{border:1px dotted #000;width:60px;height:17px}.payment span:hover{border:1px dotted #000}.ctynh15{background:url('http://i71.fastpic.ru/big/2015/0724/60/6bdd599fbaf7f604949f2ee3ab774560.png') no-repeat;text-align:center;margin-left:auto;margin-right:auto}#amoney2 .south.active {background-position:-304px -188px;width:60px;height:17px;}#ammh1{background-position:-437px -36px;width:60px;height:17px}#ammh1:hover, #ammh1:active{background-position:-304px -170px;width:60px;height:17px}#ammh15{background-position:-194px -120px;width:90px;height:39px}#ammh2{background-position:-376px -54px;width:60px;height:17px}#ammh2:hover, #ammh2:active{background-position:-437px 0;width:60px;height:17px}#ammh16{background-position:-194px 0;width:90px;height:39px}#ammh3{background-position:-243px -232px;width:60px;height:17px}#ammh3:hover, #ammh3:active{background-position:-346px -134px;width:60px;height:17px}#ammh17{background-position:-285px -40px;width:90px;height:39px}#ammh4{background-position:-182px -178px;width:60px;height:17px}#ammh4:hover, #ammh4:active{background-position:-285px -80px;width:60px;height:17px}#ammh18{background-position:-103px -40px;width:90px;height:39px}#ammh5{background-position:-182px -232px;width:60px;height:17px}#ammh5:hover, #ammh5:active{background-position:-285px -134px;width:60px;height:17px}#ammh19{background-position:-91px...
JavaScript
(function($) {
this.show_wm = function()
{
$('#rupay, #robox').hide();
$('#wm').slideDown(500);
return false;
};
this.show_rupay = function()
{
$('#wm, #robox').hide();
$('#rupay').slideDown(500);
return false;
};
this.show_robox = function()
{
$('#wm, #rupay').hide();
$('#robox').slideDown(500);
return false;
};
this.hide_all = function()
{
$('#wm, #rupay, #robox').hide();
return false;
}
})(jQuery);
jQuery(function($) {
$('#amoney').on('click', '.south', function(){
$('#amoney .south.active').removeClass('active');
$(this).addClass('active');
});
});
var chislo = $("span.chislo").html();
$("input#obox-pay-1").val(chislo);