Поле выбора Javascript отменяет ввод по щелчку мыши в сафари

У меня есть вход, который не позволяет мне вводить ввод. Всякий раз, когда я пытаюсь щелкнуть по вводу, он автоматически перескакивает назад на исходный вход выбора. Какие-либо предложения?

HTML:

<h4 class="plan-info-header">Plan info</h4>
            <label class="plan-name">Plan name: 
                <select id="billing-plan" name="billing-plan" class="selectpicker">
                    <option>Choose plan</option>
                    <option>Basic</option>
                    <option>Prime</option>
                    <option>Gold</option>
                </select>

            <div class="payment-term">
                <label>Billing period:</label>
                <select id="billing-price" name="billing-term" class="selectpicker" disabled>
                    <option value="0">Choose billing term</option>
                </select>
                <br>
                <label>Advertising Budget:</label>
                <input id="advertising"></input>

<div class="card-charge-info">
Your card will be charged $<span id="payment-total">0</span> now, and your subscription will bill $<span id="payment-rebill">0</span> every month thereafter. You can cancel or change plans anytime. <!-- <span id="test">XXX</span> -->
            </div>

Javascript:

 var term = 0;
 var price = 0;
 var additional = 0;
 var fix = 0;
 var plan = document.getElementById('billing-plan');
 plan.addEventListener('change', enableBilling, false);
 var select = document.getElementById('billing-price');
 select.addEventListener('change', updatePrice, false);

function populateBilling(planName) {
var options = {
    basic: { 
        "Option" : ["$200/month for 1-yr", "$250/month"],
        "Value" : [300, 350]
    },
    prime: { 
        "Option" : ["$300/month for 1-yr", "$350/month"],
        "Value" : [400, 450]
    },
    gold: { 
        "Option" : ["$400/month for 1-yr", "$450/month"],
        "Value" : [500, 550]
    }
}

//RESET BILLING PERIOD OPTIONS
select.options.length = 1;
document.getElementById('payment-total').innerText = 0 + additional;
document.getElementById('payment-rebill').innerText = 0 + additional;
var data = options[planName];
if (data) {
    for (var i = 0; i < data.Option.length; i++){
        var temp = document.createElement('option');
        temp.value = data.Value[i];
        temp.text = data.Option[i];
        select.appendChild(temp);
    }
   }
 }

function enableBilling(e) {
    document.getElementById('billing-price').disabled=false;
    var planName = plan.options[plan.selectedIndex].text.toLowerCase();
    populateBilling(planName);

}

function updatePrice(e) {
    price = parseFloat(select.value);
    fix = 100;
    if (price == select.options[2].value){
        term = 1;
    } 
    document.getElementById('payment-total').innerText = price + additional;
    if (price == select.options[2].value){
    document.getElementById('payment-rebill').innerText = 0 + additional; 
    } else {
    document.getElementById('payment-rebill').innerText = price + additional - fix;
    }
}

Мой JSFIDDLE: http://jsfiddle.net/aGq9q/17/