Utiliser 2 boutons différents

Merci. Mais au premier chargement du calendrier : pas de problème il s'affiche

Date de début : <INPUT type="text" name="debut" value="" size=9em> 
			<input type="button" name="bouton1" value="cal" class='boutonCal' id="1" onclick="afficher_cal(this),voir('entete')";><br /><br />
		<span style="font-size:0.7em;">cliquer sur le bouton pour afficher le calendrier</span><br />
		Date de fin :	 <INPUT type="text" name="fin" value=""size=9em style="margin-left:1.5em;">
			<input type="button" name="bouton2" value="cal" class='boutonCal1' id="2" onclick="afficher_cal(this),voir('entete')";><br />

les fonctions

function afficher_cal(obj){
	var inputId = obj.id;

	var existingTable = document.querySelector('table');
	if (existingTable) existingTable.parentElement.removeChild(existingTable);
 ...
	if (inputId === '1'){	
		document.body.appendChild(table);
	}
	var table = document.getElementById("tableCal");
	if (table != null) {
		for (var i = 0; i < table.rows.length; i++) {
           		for (var j = 0; j < table.rows[i].cells.length; j++)
            			table.rows[i].cells[j].onclick = function () {
                			tableText(this,inputId);
           	 		};
        		}
    		}
	}
}
function voir(id){
	document.getElementById('entete').style.display = 'inline';
}

Le problème se situe ici. Quand je clique sur les boutons "<" et ">" l'entête avance ou recule bien d'un mois mais le calendrier ne bouge pas
Code HTML

<!--- en tête du tableau contenant "1 bouton < cliquable", le mois et l'année, "1 bouton > cliquable" --->
<div id="entete" >
	<input type='button' name='bouton' value='<' onclick='previous(gen),Njours(gen)'; class='boutonCal'>
	<input type='text' name='an'  class='inputladate' size=16em value='<?php echo $mois_fr[$mois]; echo " $anne";?>'>
	<input type='button' name='bouton' value='>' onclick='next(gen),Njours(gen)'; class='boutonCal'>
</div>

les fonctions pour avancer ">"

function next(gen){
	var numero = parseInt(document.gen.mois_encours.value);
	var numerofin = 12;
	var an = parseInt(document.gen.annee.value);
	if (numero < numerofin){
		var numero = ++numero ;
		document.gen.mois_encours.value= +numero;
	}
	else if (numero = numerofin){
		document.gen.mois_encours.value= 1;
		var an = ++an ;
		document.gen.annee.value= +an;
		numero = 1;
	}
	var le_mois =["","janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"];
	var valeur = le_mois[numero];
	document.gen.an.value= valeur.concat(' ').concat(+an);
	// sera utiliser pour afficher les jours du mois précédent dans le calendrier
	var moisavant = parseInt(document.gen.mois_encours.value) ;
	moisavant -= 1;
	if (moisavant === 0) moisavent = 12;
	document.gen.mois_avant.value = moisavant;
	target = new Date(an,moisavant,0);
	document.gen.pjma.value = target.getDate();
}
function Njours(gen){
var inputId = obj.id;
	var mois_js = parseInt(document.gen.mois_encours.value);
	var mois = mois_js -1;
	var anne_js = parseInt(document.gen.annee.value);
	var jour_js = "1";
	target = new Date(anne_js,mois_js,0);
	nbJour = target.getDate(); // donne le nombre de jours dans le mois sélectionné
	document.gen.nbjjs.value = nbJour;
	target = new Date(anne_js,mois,1);
	var madate = new Date(anne_js,mois_js,1);
	var FirstD = target.getDay(madate);
	document.gen.premierjourmois.value = FirstD; // donne le 1er jour du mois dimanche=0, lundi=1, mardi=2 ...

	afficher_cal(obj);
}

si j'enlève tout ce qui se rapporte au bouton : var inputId = obj.id le calendrier avance ou recule normalement !!

Pour le moment je suis en local. J'intégrerai le calendrier sur le site quand il fonctionnera correctement.
je le charge sur l'adresse indiquée.
merci

Sur la 1ère ligne de code ci-dessous j'ai mis une simple table pour tester. Quand je clique sur un input la table s'efface.Sur le site la table que j'ai est complétée au chargement de la page.
Pour l'autre problème, c'est à dire le bouton pour enregistrer les dates dans la base de donnée je l'ai placé après la balise "calendrier" et malgré ça quand le calendrier s'affiche le bouton est entre "l'entête" et le calendrier.

<table><tr><td>toto</td><td>tata</td></tr></table><br />
<div id="calendrier">
<FORM NAME="gen">
	<p class="selection">
		<span style="text-align:center;">Sélection des dates de disponibilités</span><br /><br />
		Date de début : <INPUT class="choseDate tgt" id="startDate" type="text" name="debut" value="" size=9em/> <br/><br/>
		Date de fin :	<INPUT class="choseDate tgt" id="endDate"   type="text" name="fin"   value="" size=9em style="margin-left:1.5em;">
	</p>
....
	<!---date fin pour bdd--->  	<INPUT type="hidden" name="date_fin" value="">
<!--- en tête du tableau contenant "1 bouton < cliquable", le mois et l'année, "1 bouton > cliquable" --->
<div id="entete" class="tgt">
	<input type='button' name='bouton' value='<' onclick='previous(gen),Njours(gen)'; class='boutonCal'>
	<input type='text' name='an'  class='inputladate' size=16em value='<?php echo $mois_fr[$mois]; echo " $anne";?>'>
	<input type='button' name='bouton' value='>' onclick='next(gen),Njours(gen)'; class='boutonCal'>
</div>
</FORM>
</div>
<input type = "button" name = "Enreg" value = "Enregistrer">
</body>

Et une autre chose que je viens de voir : si je clique sur les cellules du début du calendrier ou de la fin (les cellules du mois d'avant ou du mois d'après ) je récupère la valeur dans les input. sauf que par exemple si je clique sur la 1ere cellule de février je récupère "30/02/2017". j'ai mais ça dans le css des cellules vides mais ça ne fait rien

#tableCal .couleurvide { background-color : #E0FFFF;color:#808080;disabled:disabled;}

J'espère que mes explications sont plus claires.
Je cherche en même temps

Merci pour toute l'aide