{
  "main_object": {
   "id": "0",
   "getExerciseTitle": "TestToConfirm",
   "language": "nl_NL",
   "application": "lettergrepen",
"main_object": {
  "title": "TestToConfirm",
  "language": "nl_NL",
  "exercises": [
    {
      "word": "huisarts",
      "syllables": [
        "huis",
        "arts"
      ]
    },
    {
      "word": "huisartsenpraktijk",
      "syllables": [
        "huis",
        "artsen",
        "praktijk"
      ]
    },
    {
      "word": "testikels",
      "syllables": [
        "test",
        "ikels"
      ]
    },
    {
      "word": "Graag gedaan. v",
      "syllables": [
        "graag",
        "gedaan"
      ]
    }
  ]
},
"dataType": "json"
 }
}

function createExercise(json) {
  const exercises = json.main_object.main_object.exercises;
  exercises.forEach(function(exercise) {
var exer = $('<div/>', {
    'class': 'row'
  })
  .append(
    $('<div/>', {
      'class': 'col-md-3'
    })
    .append(
      $('<div/>', {
        'class': 'row'
      })
      .append($('<div>', {
        class: 'col-md-3 audioButton'
      }))
      .append($('<div>', {
        class: 'col-md-9 ExerciseWordFontSize exerciseWord',
        'id': 'wordInput[' + ID123 + ']',
        text: exercise.word
      }))
    )
  ).append(
    $('<div>', {
      class: 'col-md-9'
    })
    .append(
        $('<div/>', {
            class: 'row'
        }))
    .append($('<div/>', {
        class: 'col-md-3 inputSyllables'
    }))
  );

$("#exerciseField").append(exer);
ID123++;
exer.find('.audioButton').append(getAudioForWords());

  });

  exercises.forEach(function(exercise) {
   lengthsyllables = exercise.syllables.length;
   console.log(lengthsyllables);
   for (l = 0; l < lengthsyllables; l++) {
    var getInputField = $('<input/>', {
        'type': 'text',
        'class': 'form-group form-control col-md-3',
        'name': 'inputSyllables'
       });
    $('.inputSyllables').append(getInputField);
      }
     });
   }