How can I make a button inside an array respond to only it's own wrapper using javascript?

Question

Hopefully someone can help me with this problem, excuses me if I didn't describe the question properly. English is not my first language.

My code script loads all content from my database, using the array function. I've created a wrapper DIV, which contains a maximum of 5 inner-divs, based on the number of results. If the script loads 4 results out of the database, 4 inner-divs are created. If the script loads 17 results out of the database, 17 inner-divs are created, etc.

Every page contains 5 inner-divs. It automatically creates a new wrapper-div whenever the previous wrapper-div is completely filled (so I have 4 wrapper-divs if the result = 17 ie).

Now, every wrapper contains multiple functions, like close buttons, print buttons, etc. I've created this code which works fine for as long as there's only 1 wrapper-div. But as soon as there are more than one wrapper-divs, nothing works.

I know that the problem is because ID's have to be unique. But how can I adjust this code so that javascript starts to work? So that if I click, for example, the close button of wrapper 2, only wrapper 2 will close, and not all the wrappers?

The code I have so far

  var wrapper_programmaker = document.getElementsByClassName('wrapper_programmaker');
        for (var g = 1; g < wrapper_programmaker.length; g++) {
            var expanded[g] = true;
            document.getElementById("kolom_trigger"+[g]).onclick = function() {
               if (!expanded[g])
                {
                    expanded[g] = true;
                    $("#kolomInstellen"+[g]).hide(1000);
                }
                else
                {
                    expanded[g] = false;
                    $("#kolomInstellen"+[g]).show(1000);
                };
           };

           document.getElementById("kolom1_trigger"+[g]).onclick = function() {
                document.getElementById('kolom1'+[g]).style.width = 'auto';
                $("#kolom2"+[g]).hide();
            };

            document.getElementById("kolom2_trigger"+[g]).onclick = function() {
                document.getElementById('kolom1'+[g]).style.width = '41%';
                $("#kolom2"+[g]).show();
            };

            document.getElementById("closeBTN"+[g]).onclick = function() {
                if (!expanded[g])
                {
                    expanded[g] = true;
                    $("#kolomInstellen"+[g]).hide(1000);
                }
                else
                {
                    expanded[g] = false;
                    $("#kolomInstellen"+[g]).show(1000);
                };
            };
        }

This is the PHP:

<? $sql_actCount = mysqli_query($mysqli, "SELECT DISTINCT datum FROM activiteiten WHERE programmaID=$programmaID");
$rowcount_actCount=mysqli_num_rows($sql_actCount);
$page_rows = 5;
$last = ceil($rowcount_actCount/$page_rows);

for ($x = 1; $x <= $last; $x++) {
    $max = 'limit ' .($pagenum - 1) * $page_rows .',' .$page_rows;
    if ($pagenum < 1) 
    { 
    $pagenum = 1; 
    } 
    elseif ($pagenum > $last) 
    { 
    $pagenum = $last; 
    } 
    $pagenum++;
?>
<div class="wrapper_programmaker">
  <div class="main_programmaker" style="background-image:url(../images/programmaBG_<? echo $taal; ?>_<? echo $seizoen; ?>.jpg); background-repeat:no-repeat; background-size:contain;">
    <div class="programmaker_content_activiteiten">
        <? $sql_data = mysqli_query($mysqli, "SELECT * FROM activiteiten WHERE programmaID=$programmaID GROUP BY datum ORDER BY datum ASC $max"); 
        while($rows_data=mysqli_fetch_array($sql_data,MYSQLI_ASSOC)){
            $nlDatum = $rows_data['datum'];
            if ($taal == 'NL') {
                setlocale(LC_ALL, 'nl_NL.UTF8');
                $convertDatum = (strftime('%e %B %Y',strtotime($nlDatum)));
            }
            if ($taal == 'DE') {
                setlocale(LC_ALL, 'de_DE.UTF8');
                $convertDatum = (strftime('%e. %B %Y',strtotime($nlDatum)));
            }
            if ($taal == 'EN') {
                setlocale(LC_ALL, 'en_EN.UTF8');
                $convertDatum = (strftime('%B %e, %Y',strtotime($nlDatum)));
            }
            if ($taal == 'FR') {
                setlocale(LC_ALL, 'fr_FR.UTF8');
                $convertDatum = (strftime('%e %B %Y',strtotime($nlDatum)));
            }
        ?>
        <div class="programmaker_content_kolom">
        <font class="programmaker_content_datum">
        <? echo $convertDatum ?>
        </font>
        <br>
            <? $single_datum = $rows_data['datum'];
            $sql_single_act = mysqli_query($mysqli, "SELECT * FROM activiteiten WHERE programmaID=$programmaID AND datum='$single_datum' ORDER BY van ASC");
            while($rows_single_act=mysqli_fetch_array($sql_single_act,MYSQLI_ASSOC)){
                $activiteitID = $rows_single_act['id'];
                $activiteitTitel = $rows_single_act['titel'];
            ?>
            <a href="#" class="noline">
            <div class="programmaker_content_blok">
            <font class="programmaker_content_titel">
            <? $sql_vertaal_titel = mysqli_query($mysqli, "SELECT * FROM vertalingen WHERE NL='$activiteitTitel'");
            $result_vertaal_titel = mysqli_fetch_assoc($sql_vertaal_titel);
            echo $result_vertaal_titel[$taal]; ?>
            </font>
            <br>
            <font class="programmaker_content_tijd">
            <? echo $rows_single_act['van']; ?> - <? echo $rows_single_act['tot']; ?>
            </font>
            <br>
            <font class="programmaker_content_trefpunt">
            <? $origNL = $rows_single_act['verzamelpunt'];
            $sql_trefpunt = mysqli_query($mysqli, "SELECT * FROM verzamelpunten WHERE NL='$origNL'");
            $result_trefpunt = mysqli_fetch_assoc($sql_trefpunt);
            if ($result_trefpunt[$taal] != '') {
                echo $result_trefpunt[$taal]; 
            } else {
                echo '&nbsp;';
            }?>
            </font>
            </div>
            </a>
            <div style="position:relative; width:100%; right: 10%; bottom: 35px;">
            <table width="100%">
            <tr>
            <td width="50%">&nbsp;

            </td>
            <td width="16%">
            <? $bedragenID = $rows_single_act['bedragenID']; 
            $sql_bol_bedrag = mysqli_query($mysqli, "SELECT * FROM programmabol_bedragen WHERE id=$bedragenID");
            $result_bol_bedrag = mysqli_fetch_assoc($sql_bol_bedrag);
            ?>
            <img src="../images/<? echo $result_bol_bedrag['url']; ?>.png" width="100%">
            </td>
            <td width="16%">
            <? $leeftijdenID = $rows_single_act['leeftijdenID']; 
            $sql_bol_leeftijden = mysqli_query($mysqli, "SELECT * FROM programmabol_leeftijden WHERE id=$leeftijdenID");
            $result_bol_leeftijden = mysqli_fetch_assoc($sql_bol_leeftijden);
            ?>
            <img src="../images/<? echo $result_bol_leeftijden['url']; ?>.png" width="100%">
            </td>
            <td width="16%">
            <? $themasID = $rows_single_act['themasID']; 
            $sql_bol_themas = mysqli_query($mysqli, "SELECT * FROM programmabol_themas WHERE id=$themasID");
            $result_bol_themas = mysqli_fetch_assoc($sql_bol_themas);
            ?>
            <img src="../images/<? echo $result_bol_themas['url']; ?>.png" width="100%">
            </td>
            </tr>
            </table>
            </div>
            <? } ?>
        </div>
        <? } ?>
        </div>
  </div>
  <div class="kolomWrapper">
    <div id="kolom1" data-id="<? echo $x; ?>">
    <font class="programmaker_content_trefpunt">
    1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 
    </font>
    </div>
    <div id="kolom2" data-id="<? echo $x; ?>">
    <font class="programmaker_content_trefpunt">
    2 kolom - 2 kolom - 2 kolom - 2 kolom - 2 kolom - 2 kolom - 2 kolom - 2 kolom - 2 kolom - 2 kolom - 
    <font class="programmaker_content_trefpunt">
    </div>
  </div>
  <div class="kolomPick" align="center" data-id="<? echo $x; ?>">
      <font class="kolomtitel">
      Kolommen
      </font>
      <br>
      <table width="100%">
      <tr>
      <td width="50%">
      <div style="width:100%">
      <img class="kolom1_trigger" src="../images/Kolom_1.png" width="100%" data-id="<? echo $x; ?>">
      </div>
      </td>
      <td width="50%">
      <div style="width:100%">
      <img class="kolom2_trigger" src="../images/Kolom_2.png" width="100%" data-id="<? echo $x; ?>">
      </div>
      </td>
      </tr>
      </table>
      <img src="../images/close_<? echo $kleur; ?>.png" width="15px" style="position:absolute; top:5px; right:5px" class="closeBTN">
  </div>
  <img src="../images/Kolom_trigger.png" style="width:2%; z-index:997; position:absolute; top: 51.5%; left:29.3%;" id="kolom_trigger" data-id="<? echo $x; ?>">
</div>
<? } ?>
</div>

Answer 1

I know that this is not a full answer, but your PHP/HTML is too messy; and there is to much of it, to clean that up for you.

If you turn the enumerated id's into css-classes, your code could look sth. like this:
You already use jQuery for the transitions, why not utilize it's full power.

var $wrapper_programmaker = $('.wrapper_programmaker')
    .on('click', '.kolom_trigger, .closeBTN', function(e){
        //these two buttons seem to execute the same code/logic, 
        //just at the opposite ends of the state/animation
        $('.kolomInstellen', e.delegateTarget).toggle(1000);
    })
    .on('click', '.kolom1_trigger', function(e){
        $('.kolom1', e.delegateTarget).width('auto');
        $('.kolom2', e.delegateTarget).hide();
    })
    .on('click', '.kolom2_trigger', function(e){
        $('.kolom1', e.delegateTarget).width('41%');
        $('.kolom2', e.delegateTarget).show();
    });

//close every .kolomInstellen except of the first   
$wrapper_programmaker.not(':first').find('.kolomInstellen').hide();

managing all wrapper at the same time.

Disclaimer: This JS-snippet doesn't work on your current markup, since it relies on classes instead of enumerated id's.
Then, this code is based on your JS-code, and the estimated structure of the html after you convert the id's.
Therefore it might need a some tweaks after you've fixed your Markup.

TODO:

• convert the enumerated id's into (non-enumerated) css-classes.
• you should fix the indentation in your php-file, that makes it more readable/understandable to everybody else.
• then, plz remove the inline-styles and put them into a css-file.
• and you should convert your buttons (wich are currently images) into div's and set the icon as a background-image.

Although the last two are not necessary, it would be a more clean approach.
Styles belong into a CSS-file.
This improves the readability of your Markup (since it is not cluttered with styles) and it is easier to maintain.