<p class="form-row form-row-wide">
<label for="select_price_option">Price option<span class="required"> *</span></label>
<select name="select_price_option" id="select_price_option" />
<option disabled selected value> Please select one</option>
<option>Total fee</option>
<option>Starting fee</option>
<option>I need more information</option>
</select>
</p>

<p class="form-row form-row-wide" id="price_input_div">
<label for="quote_price_input">Enter your price</label>
<input type="text" name="quote_price_input" id="quote_price_input" class="input-text"/>
</p>

<p class="form-row form-row-wide">
<label for="message_to_customer">Enter your message<span class="required"> *</span></label>
<textarea name="message_to_customer" id="message_to_customer" minlength="30" class="input-text"></textarea>
</p>

// Save custom checkout fields to session storage
(function ($) {
    // Run on page load
window.onload = function() {
    var quote_price_input = sessionStorage.getItem("quote_price_input");
    var message_to_customer = sessionStorage.getItem("message_to_customer");
    var select_price_option = sessionStorage.getItem("select_price_option");

    if(quote_price_input !== null) {
    document.getElementById('quote_price_input').value = quote_price_input;
      } else
    document.getElementById('quote_price_input').value = "";

    if(select_price_option !== null) {
        var sel = document.getElementById('select_price_option');
        var opts = sel.options;
        for (var opt, j = 0; opt = opts[j]; j++) {
            console.log(opt.innerHTML);
            if (opt.innerHTML == select_price_option) {
              sel.selectedIndex = j;
              break;
            }
        }
      }

    if(message_to_customer !== null) {
    document.getElementById('message_to_customer').innerHTML = message_to_customer;
      } else
    document.getElementById('message_to_customer').innerHTML = "";
};

// Before refreshing the page, save the form data to sessionStorage
window.onbeforeunload = function() {
    var quote_price_input = document.getElementById('quote_price_input');
    var message_to_customer = document.getElementById('message_to_customer');
    var select_price_option = document.getElementById('select_price_option');

    if(quote_price_input !== null) {
        sessionStorage.setItem('quote_price_input', $('#quote_price_input').val());
    }

    if(select_price_option !== null) {
        sessionStorage.setItem('select_price_option', $('#select_price_option').val());
    }

    if(message_to_customer !== null) {
        sessionStorage.setItem('message_to_customer', $('#message_to_customer').val());
    }
};
})(jQuery);

(function ($) {
$("#select_price_option").change(function() {
  if ($(this).val() == "I need more information") {
    $('#price_input_div').hide();
  } else {
    $('#price_input_div').show();
  }
});
$("#select_price_option").trigger("change");
})(jQuery);

// Conditionally show price
(function ($) {
window.onload = function() {
$("#select_price_option").change(function() {
  if ($(this).val() == "I need more info to give a price") {
    $('#price_input_div').hide();
  } else {
    $('#price_input_div').show();
  }
});
$("#select_price_option").trigger("change");
}})(jQuery);