I have JSON that looks like this:

```
{
    "solution": {
        "1": {
            "cell-1": "1",
            "cell-2": "2",
            "cell-3": "3",
            "cell-4": "4",
            "cell-5": "5",
            "cell-6": "6",
            "cell-7": "7",
            "cell-8": "8",
            "cell-9": "9"
        },
        "2": {
            "cell-1": "1",
            "cell-2": "2",
            "cell-3": "3",
            "cell-4": "4",
            "cell-5": "5",
            "cell-6": "6",
            "cell-7": "7",
            "cell-8": "8",
            "cell-9": "9"
        },
        etc...
    }
}

```

I'm making a sudoku game, so there are 9 sections and each section has 9 cells (which contain a number). The puzzle has to be filled in automatically using the above JSON as the data source. My JS to loop through the JSON file and fill in the numbers looks like this:

```
$.getJSON(validSolution, function(data) {
    $.each(data.solution, function(sectionName, cells) {
        var currentSection = $('[data-section=' + sectionName + ']');
        console.log(currentSection);
        $.each(cells, function(cellName, cellNumber) {
            console.warn(cellNumber);
            currentSection.find('[data-number]').text(cellNumber);
        });
    });
});

```

The HTML looks like this (one section as an example, there are 9 of them):

```
<div class="sudoku__body__section" data-section="1">
    <div class="sudoku__body__section__cell" data-cell="1">
        <span class="sudoku__body__section__cell__number" data-number></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="2">
        <span class="sudoku__body__section__cell__number" data-number></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="3">
        <span class="sudoku__body__section__cell__number" data-number></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="4">
        <span class="sudoku__body__section__cell__number" data-number></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="5">
        <span class="sudoku__body__section__cell__number" data-number></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="6">
        <span class="sudoku__body__section__cell__number" data-number></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="7">
        <span class="sudoku__body__section__cell__number" data-number></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="8">
        <span class="sudoku__body__section__cell__number" data-number></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="9">
        <span class="sudoku__body__section__cell__number" data-number></span>
    </div>                 
</div>

```

The problem is that this code fills every cell with the number 9. With the current JSON file, the output should be like this for every section:

```
-------------
| 1 | 2 | 3 |
-------------
| 4 | 5 | 6 |
-------------
| 7 | 8 | 9 |
-------------

```

However, it looks like this:

```
-------------
| 9 | 9 | 9 |
-------------
| 9 | 9 | 9 |
-------------
| 9 | 9 | 9 |
-------------

```

What's the problem here and how do I fix it? The console returns no errors and all the logs show the correct values. The loops are going perfectly well and I can see the correct sections, cells and corresponding values, but when I use jQuery `text()` or `html()` it just places `9` everywhere.