Problème formulaire bootstrap

Bonjour à tous et toutes

Depuis 2 jours j'essaye désespérément de faire un formulaire en bootstrap.
J'y arrive avec une données mais pas moyen d'y arriver avec une deuxième.

Le code avec une donnée

<section id="faq" class="faq -caissexl">
    <div class="section-header">
        <div class="container">
            <h2><i class="fa fa-question-circle"></i> Frequent Asked Questions  CaisseXL </h2>
        </div>
    </div>

    <div id="motCle" class="container">
           <div class="form-group">
           <input class="form-control"        id="motcle"      name="motcle"      type="text" placeholder="Je recherche..." onchange="recherche_motcle('motcle');"/>  
           </div>
           <button class="btn btn-large btn-primary" ';">Rechercher</button>
    </div>
    
    <script>
        function recherche_motcle(inputId) {
            var strMotcle = $("#" + inputId).val();
            strMotcle = strMotcle.trim();
                       
            if (strMotcle=="") {
                alert("Veuillez entrer au moins un mot clé à rechercher.");
                $("#"+inputId).focus();
                return null;
            }
            $.get('recherche.php', { motcle: strMotcle }, function(data) { $('#divfaq').html(data); });
        }
    </script>
</section>

page recherche.php où je recupere la variable

<?php
   $motcle = $_GET["motcle"];
?>

Si je fait unerequête sql çà marche



Formulaire avec une données en +


<section id="faq" class="faq-caissexl">
<div class="section-header">
<div class="container">
<h2><i class="fa fa-question-circle"></i> Frequent Asked Questions CaisseXL </h2>
</div>
</div>

<div id="motCle" class="container">
<div class="form-group">

<input class="form-control" id="idcategorie" name="idcategorie"
type="int" placeholder="401" onchange="recherche_idcategorie('idcategorie');"/>

<input class="form-control" id="motcle" name="motcle"
type="text" placeholder="Je recherche..." onchange="recherche_motcle('motcle');"/>

</div>
<!-- <button class="btn btn-large btn-primary" onclick="recherche_motcle('motcle') ';">Rechercher</button>-->
<button class="btn btn-large btn-primary" ';">Rechercher</button>

</div>


<script>
function recherche_motcle(inputId, inputId1) {
var strMotcle = $("#" + inputId).val();
var intIdcategorie = $("#" + inputId1).val();

strMotcle = strMotcle.trim();
intIdcategorie = intIdcategorie.trim();

if (strMotcle=="") {
alert("Veuillez entrer au moins un mot clé à rechercher.");
$("#"+inputId).focus();
return null;
}
$.get('recherche.php', { motcle: strMotcle }, { idcategorie: intIdcategorie }, function(data) { $('#divfaq').html(data); });
}
</script>
</section>

Si je valide le formulaire j'ai ce message d'erreur

Uncaught ReferenceError: recherche_idcategorie is not defined index.php:1
Uncaught TypeError: Cannot read property 'trim' of undefined

Aidez moi s'il vous plaît
Merci d'avance