function parseArticleJSON_old() {
  fetch('tokens.json')
  .then((article) => article.json())
  .then((article_json) => {
    let output = ''
    article_json.forEach(function(token) {
      output += `${token.token} `
    })
    document.getElementById('article').innerHTML = output
  })
  .catch((error) => {
    console.log(`Error fetching article: ${error}`)
    document.getELementById('article').innerHTML = 'Error'
  })
}

function createInputs(article) {
  inputs = ''
  article.forEach(function(token) {
    if(token.adlib_tag) {
      inputs += `
      <p>
      <label for="token_${token.id}">${token.adlib_tag}</label>
      <input type="text" id="token_${token.id}" name="token_${token.id}">
      </p>
      `
    }
  })
  document.getElementById('inputs').innerHTML = inputs
}

function showArticle(article) {
  let output = ''
  article.forEach(function(token) {
    let adlib_input = document.getElementById(`token_${token.id}`);
    if(adlib_input && adlib_input.value) {
      output += `<strong>${adlib_input.value}</strong> `
    }
    else {
      output += `${token.token} `
    }
  })
  document.getElementById('article').innerHTML = output
}

createInputs(article)

document.addEventListener('click', function (event) {
  if (event.target.matches('#show-article')) {
    event.preventDefault()
    showArticle(article)
  }
}, false);