Eingabefeld per Button füllen

Anubis1982

Grünschnabel
Hallo Leute, ich hab da mal ne Frage. Ich möchte gerne ein Eigabefeld per Button füllen.
Es soll ein Pin Eingabefeld werden mit den Buttons >> 0-9 <<

Hier ist mein Html Code:

HTML:
<div class="row">
   <div class="col-sm-8">
      <center>
         <div id="safebox_bg" style="margin-left:-22px;margin-right:-22px;">
            <div id="safebox_content">
               <b>
                  <div  style="color:green;margin-top:15px;margin-left:180px; position: absolute;" id="AvalueBox">0</div>
               </b>
               <div style="margin-top:50px; position: absolute;">
                  <input type="text" style="min-width:40px;width:50px;" class="form-control input-sm" placeholder="**" id="sbBetSum" maxlength="2">
               </div>
            </div>
         </div>
      </center>
      <div>
         <span>
         <button type="button" class="btn btn-info sbPin" data-action="1" style="margin-bottom:3px;">1</button>
         <button type="button" class="btn btn-info sbPin" data-action="2" style="margin-bottom:3px;">2</button>
         <button type="button" class="btn btn-info sbPin" data-action="3" style="margin-bottom:3px;">3</button>
         </span>
      </div>
      <div>
         <span>
         <button type="button" class="btn btn-info sbPin" data-action="4" style="margin-bottom:3px;">4</button>
         <button type="button" class="btn btn-info sbPin" data-action="5" style="margin-bottom:3px;">5</button>
         <button type="button" class="btn btn-info sbPin" data-action="6" style="margin-bottom:3px;">6</button>
         </span>
      </div>
      <div>
         <span>
         <button type="button" class="btn btn-info sbPin" data-action="7" style="margin-bottom:3px;">7</button>
         <button type="button" class="btn btn-info sbPin" data-action="8" style="margin-bottom:3px;">8</button>
         <button type="button" class="btn btn-info sbPin" data-action="9" style="margin-bottom:3px;">9</button>
         </span>
      </div>
      <div>
         <span>
         <button type="button" class="btn btn-info sbPin" data-action="0" style="margin-bottom:3px;">0</button>
         </span>
      </div>
   </div>
   <div class="col-sm-4">
      <div class="well text-center" style="margin-left:-15px;margin-right:-15px;">
         <div id="sbHist" class="margin-top:15px;container"></div>
      </div>
   </div>
</div>
</div>   
</div>
</div>

Habe auch schon einen Ansatz aus einem anderen Eingabefeld von meiner Seite und wollte den umschreiben aber das hat nicht so geklappt.

Javascript:
    $(document).on("click", ".sbPin", function() {
        var bet_amount = str2int($("#sbBetSum").val());
        var action = $(this).data("action");
        if (action == "clear") {
            bet_amount = 0;
        } else {
            bet_amount += parseInt(action);
        }
        $("#sbBetSum").val(bet_amount);
    });

Bei dem Beispiel addiert er die zahlen die ich auf dem "Pinfeld" eingebe.

Es soll so aussehen, wenn ich die [1] drücke, das er mir eine 1 ins Eingabefeld einträgt und wenn ich danach die [2] drücke, er mir eine 2 dazu schreibt, so das im Eingabefeld dann 12 z.B. steht.

könnt ihr mir da evtl weiterhelfen?
ist bestimmt voll easy, aber manchmal sehe ich den Wald vor lauter Bäumen nicht.