How to make dropdown box and textbox appear when clicked on add more

Question

The concept is, to enable to each item added has single or multiple category and price. For instance, I add Item add,then I choose category in the dropdown box and set price in the textbox respectively. Beside the textbox there will be a link to add more. When clicked on that link ,another set of dropdownlist for category and textbox for price should appear. How do I do this?

Currently I can only make text box appear multiple times, I'm not sure how to make the select box also repeat upon click. Please help! Thanks.

HTML

   <form action="#" method="POST" class="form-horizontal" role="form">
    <table border="1" style="border-collapse:collapse;" style="margin-left:20px;">
        <tr><td>Addon Name</td><td>:</td><td><input type="text" name="addon"></td></tr>
        <tr><td>Addon Deposit</td><td>:</td><td><input type="text" name="deposit" value=""></td></tr>
        <!-- select sub category optional-->
         <tr><td>Addon Sub category</td><td>:</td>
         <td>
//this is the drop down box that I want to repeat with the textbox(boxes[])
        <select name="sub_cat[]">
        <?php

        while($row_sub=mysql_fetch_array($result_sub))
        {
            ?>
            <option value="<?php echo $row_sub['sub_id'];?>"><?php echo $row_sub['sub_cat_name'];?></option>
            <?php
        }
        ?>

        </select>

                if( !empty( $data ) )
                {
                    foreach( unserialize($data) as $key => $value ) :
                ?>
                    <div class="form-group">

                        <label class="col-sm-2 control-label" for="txtbox<?php echo $key + 1; ?>">Box <span class="label-numbers"><?php echo $key + 1; ?></span></label>
                        <div class="col-sm-10">

                            <input class="form-control" type="text" name="boxes[]" id="txtbox<?php echo $key + 1; ?>" value="<?php echo htmlentities( $value ); ?>" />
                            <?php echo ( 0 == $key ? '<a href="#" class="btn btn-success btn-xs add-txt">Add More</a>' : '<a href="#" class="btn btn-danger btn-xs remove-txt">Remove</a>' ); ?>
                        </div>
                    </div>
                <?php
                    endforeach;
                }
                else
                {
                ?>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="txtbox1">Price <span class="label-numbers">1</span></label>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" name="boxes[]" id="txtbox1" />
                            <a href="#" class="btn btn-success btn-xs add-txt">Add More</a>
                        </div>
                    </div>
                <?php
                }
                ?>
                    <!--<input style="margin: 0 auto; width: 200px;" class="btn btn-primary btn-block" type="submit" value="Submit" />-->

                     <p><?php
                    if( isset($_POST['boxes']) && is_array($_POST['boxes']) )
                    {
                        if( 5 < count( $_POST['boxes'] ) ) :
                            echo 'Cheating Huh!';
                        else :
                            print 'Serialized String<br>' . htmlentities( serialize( $_POST['boxes'] ) );
                        endif;
                    }
                ?></p>


         </td>
         </tr>
         <tr><td colspan="3">
         <input type="hidden" name="submitted" >
         <input type="submit" name="submit" value="Submit">
         </td></tr>
    </table>
      </form> 

Script

 <script type="text/javascript">
        SyntaxHighlighter.all();
        jQuery(document).ready(function($){
            $("body").css('min-height', $(window).height() + 1 );
            $(window).resize(function(){
                $("body").css('min-height', $(window).height() + 1 );
            });
            $("#toggle_code").click(function(){
                $(".syntaxhighlighter.demo_code").toggleClass( "collapsed", 500, function(){
                    $("#toggle_code").text( ( $("#toggle_code").text() == 'View Code' ) ? 'Hide Code' : 'View Code' );
                    $("#toggle_code").toggleClass( "btn-success btn-danger" );
                });
            });

            //Add More
            $(".form-horizontal .add-txt").click(function(){
                var no = $(".form-group").length + 1;
                if( 5 < no ) {
                    alert('Stop it!');
                    return false;
                }
                var more_textbox = $('<div class="form-group">' +
                '<label class="col-sm-2 control-label" for="txtbox' + no + '">Box <span class="label-numbers">' + no + '</span></label>' +
                '<div class="col-sm-10"><input class="form-control" type="text" name="boxes[]" id="txtbox' + no + '" />' +
                '<a href="#" class="btn btn-danger btn-xs remove-txt">Remove</a>' +
                '</div></div>');
                more_textbox.hide();
                $(".form-group:last").after(more_textbox);
                more_textbox.fadeIn("slow");
                return false;
            });

            //Remove
            $('.form-horizontal').on('click', '.remove-txt', function(){
                $(this).parent().parent().css( 'background-color', '#FF6C6C' );
                $(this).parent().parent().fadeOut("slow", function() {
                    $(this).parent().parent().css( 'background-color', '#FFFFFF' );
                    $(this).remove();
                    $('.label-numbers').each(function( index ){
                        $(this).text( index + 1 );
                    });
                });
                return false;
            });
        });
    </script>

Answer 1

I'm not sure I'm following what you are asking exactly, but the technique you used here:

var more_textbox = $('<div class="form-group">' ...

is applicable for selects too, for example:

var more_select = $('<select ...>');

and then you can use append to build options in the select like this:

more_select.append( $('<option>')
                                .attr('value', 'blort')
                                .text('blort blargh bleah!')
                   );