Random background color on anchor only gets first anchor?

i have 3 anchor blocks where i want 3 different random background-colors on when i load the page. But only the first anchor is randomly changing from background-color.

Here is the HTML & jQuery code i use:

<script type="text/javascript">
            $(document).ready ( function () {
                var color = '#'; // hexadecimal starting symbol
                var letters = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0']; //Set your colors here
                color += letters[Math.floor(Math.random() * letters.length)];
                document.getElementById('kleur').style.background = color; // Setting the random color on your div element.
            });
        </script>

<div class="content_block_list">
                    <?php if( have_rows('content_block_list') ): ?>
                        <ul>
                        <?php while( have_rows('content_block_list') ): the_row(); 
                        $content = get_sub_field('content');
                        $button_link = get_sub_field('button_link');
                        ?>
                            <li>
                                <div>
                                    <?php if ($content == true){ ?><?php echo $content; ?><?php } ?>
                                    <?php if ($button_link == true){ ?><a id="kleur" class="more" href="<?php echo $button_link; ?>">LEES MEER</a><?php } ?>
                                </div>
                            </li>
                        <?php endwhile; ?>
                        </ul>
                    <?php endif; ?>
            </div>

This code automatically generates 3 blocks with 'Read More' anchors, these anchors have background-color. Those background-colors need to change randomly, do i have to create a loop or something?

Here u can see that the first anchor does change from background-color:

Thanks for your time!