How do I select only one div between a group of divs like a radio button?

Question

I have group of divs:

        <div class="row">
            <div class="col-xs-12 well bb paylater" value="paylater" onclick="selectPayment(this)">payment1</div>
            <div class="col-xs-12 well bb alipay" value="alipay" onclick="selectPayment(this)">payment2</div>
            <div class="col-xs-12 well bb wechatpay" value="wechatpay" onclick="selectPayment(this)">payment3</div>
        </div>

My JS:

function appendCheckMark(type) {
            $(type).append('<span class="label label-info payment_select"><i class="glyphicon glyphicon-ok"></i></span>');
        }


        function selectPayment(type) {
            var val = $(type).attr('value');
            if ( val == 'paylater') {
                appendCheckMark(type);

            }
            else if (val == 'alipay') {
                appendCheckMark(type);

            }
            else if (val == 'wechatpay'){
                appendCheckMark(type);

            }
        }

My question is, how do I make those three div like a radio button? So a user can only select one of them?

Answer 1

Simply remove first the existing payment_select span before appending a new one.

function selectPayment(type) {
   //remove existing check here
   $(type).parent().find('.payment_select').remove();
   var val = $(type).attr('value');
   if ( val == 'paylater') {
        appendCheckMark(type);

   }
   else if (val == 'alipay') {
       appendCheckMark(type);

    }
    else if (val == 'wechatpay'){
       appendCheckMark(type);

    }
}