# Cost Post List

Displays a lists of cost posts.
e.g. voucherId: 4735688 in ledger Voucher - 2 in fiscal 370.

```html preview
<xena-input id="input" type="number" value="4735688" label="voucherId"></xena-input>
<xena-button id="open">Show cost post List</xena-button>
<script>
  document.getElementById('open').addEventListener('click', openDialog);

  function openDialog() {
    const inputValue = parseInt(document.getElementById('input').value, 10);
    let costPostList = document.querySelector('xwc-cost-post-list');
    if (costPostList) {
      costPostList.remove();
    }
    costPostList = document.createElement('xwc-cost-post-list');
    costPostList.setAttribute('voucher-id', inputValue);
    const button = document.getElementById('open');
    button.insertAdjacentElement('afterend', costPostList);
  }  
</script>