I have a services.php page, and I am using a for loop to create the different services content of the page using information from a MySQL database.

```
<?php for ($i=0; $i < $numberOfRecords; $i++) { ?>

<div class="download-div">

    //this line below creates the anchor with the correct id
    <a id="<?= $scroll ?>" name="<?= $scroll ?>"></a>
    <h1><?= $service[$i] ?></h1>
    <p><textarea spellcheck="true" class="service-text" name="description<?= $i ?>"><?= $description[$i] ?></textarea></p>
    <p class="current-file">Current file: <?= $image[$i] ?></p>
    <input type="file" class="browse" name="image<?= $i ?>">
    <div class="img-wide">
        <img src="upload/<?= $image[$i] ?>">
    </div>

</div>

<?php } ?>

```

The loop creates 10 different service section, each with the name of the service, description, and an image.

When I click on the anchor tag on another page ( I.E. <'a href="services.php#reforestation"> ) that is supposed to link to the id of the a tag in each section, it just goes to the top of the services.php page. However, when I click the link again, it goes to the section of the page I want it to go to. (I.E. <'a id="reforestation" name ="reforestation"> ) 

It's as if the browser doesn't see the anchor id's until the page has been loaded/ created. Then once it is loaded, it will go to the area of the page I want once I click the anchor tag.

Is there a way around this problem?