How to make a div inside an append() work?

Question

I'm trying to get the div with the id black to echo out my JSON data, but it won't work.

So far I've done this, but it misses the timing or perhaps the logic is not right.

I have checked the JSON and it's correctly formatted.

<script>
    countPos = 0;
//get JSON from school.php
    $(document).ready(function(){
        $.getJSON('school.php', function(data) {
          window.console && console.log(data);
        window.console && console.log('Document ready called');
//if button with id addPos clicked, bring up function
        $('#addPos').click(function(event){
    
            event.preventDefault();
            if ( countPos >= 9 ) {
                alert("Maximum of nine position entries exceeded");
                return;
            }
            countPos++;
                window.console && console.log("Adding position "+countPos);
            $('#position_fields').append(
                '<div id="position'+countPos+'"><br><br >\
            <label for="year">Year:</label> <input type="text" size="80" name="year'+countPos+'" value="" /> \
            <input type="button" value="-" onclick="$(\'#position'+countPos+'\').remove();return false;"></p> \
                <label for="edu_school">School:</label> <input type="text" size="80" name="edu_school'+countPos+'" id="Autoschool'+countPos+'" value="" /><br>\
                <label for="position">Position:</label> <input type="text" size="80" name="posiition'+countPos+'" value="" /><br>\
                </div>\
            <div id = "black"></div>')})
                $ ('#black').html(data);
            });
        });
    });
</script>

Answer 1

Your code makes no sense. What does school.php return? Where do you use it at all? The addpos click belongs outside the getJSON. You add each time you click so that is already wrong. You can also do <input type="button" value="-" onclick="this.closest('div').remove()" /> without the need to return false since it is a button

Please try this. Your script has so many issues I just rewrote it

Assuming school.php returns only one set of data ever

I changed some IDs to class and removed others.

The div with the data is still a mystery to me. Here I repeat it for every position, but likely you want it only once?

$(() => {
  let schoolData;
  $.getJSON('school.php', (data) => {
    schoolData = data;
  })
  $('#addPos').on('click', (event) => {
    event.preventDefault();
    const countPos = $('#position_fields').find('.position').length;
    if (countPos >= 9) {
      alert("Maximum of nine position entries exceeded");
      return;
    }
    $('#position_fields').append(`
      <div class="position">
        <label>Year: <input type="text" size="80" name="year${countPos}" value="" /></label>
        <input type="button" value="-" onclick="this.closest('div').remove()" />
        <label>School: <input type="text" size="80" name="edu_school${countPos} value="" /></label><br>
        <label>Position: <input type="text" size="80" name="posiition'+countPos+'" value="" /></label>
        <div class="black">${schoolData}</div>        
      </div>`);
  });
});