如何合并重复的javascript函数？

Question

I have a site to allow someone to place food orders. Images of potential ingredients (determined by a MySQL query) can be clicked to add or remove them, and the image will toggle on each click.

The problem I'm having is for each new item I am having to duplicate the function and just change the variable names for each new function. I'm sure there must be a way to simplify to dynamically apply to all of the ingredients without all of the redundant code. Here is the code just for two. There are dozens. Any suggestions would be appreciated.

window.onload = function () {
    var ProductElement = document.getElementById('Ketchup');
    if (ProductElement != null) {
        Ketchupobj = document.getElementById('Ketchup')
        document.getElementById('Ketchuptogg').onclick = function () {
            Ketchuptoggle();
        }
    }

    var ProductElement = document.getElementById('Mustard');
    if (ProductElement != null) {
        Mustardobj = document.getElementById('Mustard')
        document.getElementById('Mustardtogg').onclick = function () {
            Mustardtoggle();
        }
    }
}

function Ketchuptoggle() {
    if (Ketchuptggle == 'on') {
        Ketchupobj.src = "Ketchup.jpg";
        Ketchuptggle = 'off';
    } else {
        Ketchupobj.src = "noKetchup.jpg";
        Ketchuptggle = 'on';
    }
}

function Mustardtoggle() {
    if (Mustardtggle == 'on') {
        Mustardobj.src = "Mustard.jpg";
        Mustardtggle = 'off';
    } else {
        Mustardobj.src = "noMustard.jpg";
        Mustardtggle = 'on';
    }
}


<table class="ing">
<tr>
<?php

for ($x=0; $x<5 AND $row = mysql_fetch_row($result);$x++ ) {
$caps=$row[1];
$caps=strtoupper($caps);
echo <<<image
<td><b>$caps</b><br>
<a id="$row[0]" class="toggle" href="#"><img id="$row[0]img" class="toggimg" 
src="$row[0].jpg" style="border-style: none" alt=""/></a>
</td>
image;
}
echo"</tr></table>";

Answer 1

Implicit this is your friend:

var toggles = document.getElementsByClassName('toggle');
for (var i=0; i<toggles.length; i++) {
  toggles[i].isOn = true;
  toggles[i].onclick = function(ev){
     var condiment = this.id;
     this.isOn = !this.isOn;
     document.getElementById(condiment+'img').src=(this.isOn?'':'no')+condiment+'.png';
   };
 }

Answer 2

With html you have the ability to add your property for an element, so you could do:

<button class="btnProduct" data-type="mostard"> Mostard</button> 
<button class="btnProduct" data-type="ketchup"> Ketchup</button>
<button class="btnProduct" data-type="barbecue"> Barbecue</button> 

Then with a help of jquery you can do:

$('btnProduct').click(function(){
    //So, here you could use a switch or some logic 
    // to do different things for data-type
    console.log($(this).attr('data-type'))
}