Confusion with hiding some input fields using JS vanilla

I want to show hidden input fields when check “Buy on company” checkbox. It works, but if I uncheck it leaving “Is VAT exemt” checked and return: “VAT ID field” is shown with “Is VAT exemt” checkbox checked. So I want to avoid this situation.

Picture of situation:

document.getElementById('billing_company').style['display'] = 'none';
document.getElementById('billing_company_code').style['display'] = 'none';
document.getElementById('is_vat_exempt').style['display'] = 'none';
document.getElementById('is_vat_exempt_field').style['display'] = 'none';
document.getElementById('billing_vat_id').style['display'] = 'none';

document.getElementById('buy_on_company').onclick = function() {
  if (this.checked) {
    document.getElementById('billing_company').style['display'] = 'block';
    document.getElementById('billing_company_code').style['display'] = 'block';
    document.getElementById('is_vat_exempt').style['display'] = 'block';
    document.getElementById('is_vat_exempt_field').style['display'] = 'block';
    document.getElementById('billing_vat_id').style['display'] = 'block';
  } else {
    document.getElementById('billing_company').style['display'] = 'none';
    document.getElementById('billing_company_code').style['display'] = 'none';
    document.getElementById('is_vat_exempt').style['display'] = 'none';
    document.getElementById('is_vat_exempt_field').style['display'] = 'none';
    document.getElementById('billing_vat_id').style['display'] = 'none';
  }
};

document.getElementById('is_vat_exempt').onclick = function() {
  if (this.checked) {
    document.getElementById('billing_vat_id').style['display'] = 'none';
  } else {
    document.getElementById('billing_vat_id').style['display'] = 'block';
  }
};

<div id="buy_on_company_field">
  <input type="checkbox" id="buy_on_company"><label>Buy on company</label>
</div>

<div id="billing_company_field">
  <input type="text" id="billing_company" placeholder="Company name" style="display: block;">
</div>

<div id="billing_company_code_field">
  <input type="text" id="billing_company_code" placeholder="Company code" style="display: block;">
</div>

<div id="is_vat_exempt_field">
  <input type="checkbox" id="is_vat_exempt"><label>Is VAT exempt</label>
</div>

<div id="billing_vat_id_field">
  <input type="text" id="billing_vat_id" placeholder="VAT ID field" style="display: block;">
</div>

Answer

The code for clicking on buy_on_company is always hiding or showing the billing_vat_id field. It needs to test that checkbox.

document.getElementById('billing_company').style['display'] = 'none';
document.getElementById('billing_company_code').style['display'] = 'none';
document.getElementById('is_vat_exempt').style['display'] = 'none';
document.getElementById('is_vat_exempt_field').style['display'] = 'none';
document.getElementById('billing_vat_id').style['display'] = 'none';

document.getElementById('buy_on_company').onclick = function() {
  if (this.checked) {
    document.getElementById('billing_company').style['display'] = 'block';
    document.getElementById('billing_company_code').style['display'] = 'block';
    document.getElementById('is_vat_exempt').style['display'] = 'block';
    document.getElementById('is_vat_exempt_field').style['display'] = 'block';
    if (document.getElementById('is_vat_exempt').checked) {
      document.getElementById('billing_vat_id').style['display'] = 'none';
    } else {
      document.getElementById('billing_vat_id').style['display'] = 'block';
    }
  } else {
    document.getElementById('billing_company').style['display'] = 'none';
    document.getElementById('billing_company_code').style['display'] = 'none';
    document.getElementById('is_vat_exempt').style['display'] = 'none';
    document.getElementById('is_vat_exempt_field').style['display'] = 'none';
    document.getElementById('billing_vat_id').style['display'] = 'none';
  }

};

document.getElementById('is_vat_exempt').onclick = function() {
  if (this.checked) {
    document.getElementById('billing_vat_id').style['display'] = 'none';
  } else {
    document.getElementById('billing_vat_id').style['display'] = 'block';
  }
};

<div id="buy_on_company_field">
  <input type="checkbox" id="buy_on_company"><label>Buy on company</label>
</div>

<div id="billing_company_field">
  <input type="text" id="billing_company" placeholder="Company name" style="display: block;">
</div>

<div id="billing_company_code_field">
  <input type="text" id="billing_company_code" placeholder="Company code" style="display: block;">
</div>

<div id="is_vat_exempt_field">
  <input type="checkbox" id="is_vat_exempt"><label>Is VAT exempt</label>
</div>

<div id="billing_vat_id_field">
  <input type="text" id="billing_vat_id" placeholder="VAT ID field" style="display: block;">
</div>