spark keypad

<!--- start keypad -->

<div class="tab-content">

    <div class="tab-pane show active" id="tab" style="text-align: center;">

        <p style="text-align: center;">Enter ID number:</p>

        <br><a class="btn btn-primary" data-toggle="tab" href="#wrong">1</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">2</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">3</a>

        <br><br><a class="btn btn-primary" data-toggle="tab" href="#wrong">4</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">5</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#correct">6</a>

        <br><br><a class="btn btn-primary" data-toggle="tab" href="#wrong">7</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">8</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">9</a>

        <br><br><a class="btn btn-primary" data-toggle="tab" href="#wrong">*</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">0</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">#</a></div>

<div class="tab-pane show" id="correct" style="text-align: center;">

        <p style="text-align: center;">Enter ID number:</p>

        <br><a class="btn btn-primary" data-toggle="tab" href="#wrong">1</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">2</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">3</a>

        <br><br><a class="btn btn-primary" data-toggle="tab" href="#wrong">4</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">5</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#right">6</a>

        <br><br><a class="btn btn-primary" data-toggle="tab" href="#wrong">7</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">8</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">9</a>

        <br><br><a class="btn btn-primary" data-toggle="tab" href="#wrong">*</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">0</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">#</a></div>

        <div class="tab-pane show" id="right" style="text-align: center;">

        <p style="text-align: center;">Enter ID number:</p>

        <br><a class="btn btn-primary" data-toggle="tab" href="#wrong">1</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">2</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">3</a>

        <br><br><a class="btn btn-primary" data-toggle="tab" href="#wrong">4</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">5</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#Success">6</a>

        <br><br><a class="btn btn-primary" data-toggle="tab" href="#wrong">7</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">8</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">9</a>

        <br><br><a class="btn btn-primary" data-toggle="tab" href="#wrong">*</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">0</a>&nbsp; &nbsp; <a class="btn btn-primary" data-toggle="tab" href="#wrong">#</a></div>
<!--- wrong password -->