I am trying to create a chain of drop downs in a form. The first select is populating the second form, but I can't call a third from the results. I have figured out (I think) that it is a binding issue, but how would I go about correcting this.

The JavaScript on the page:

<script>

      var selected_form_div = null;

      var frm_submit_event = function(e){ 
            var $this = $(this); // the button

            //var frm = $this.closest(form);
            var frm = $('#'+selected_form_div + " form");
            console.log(frm);
            console.log(frm.serialize());

             e.preventDefault();
            $.ajax({
                type: "POST",
                url: "classes/forms/ajaxPost.php",
                data: frm.serialize(),
                dataType: "text",
                success: function($result) {
                //var obj = jQuery.parseJSON(data); if the dataType is not specified as json uncomment this

                            $('#'+selected_form_div).html($result); 
             },
            error: function() {
                alert('error handing here');
            }
        });
      }

    function loadSubSelects(value,form,select)
{
  $.post("classes/forms/update_form.php",{catid : value,form : form,select : select},function(data)

                 {
                  jQuery('#sub_categories').html(data);

                                         });
}

    $(document).ready(function(){
        $('._form_selector').click(function(e){
            e.preventDefault();
            var $this = $(this);
            $.get('classes/forms/forms.php', {
                form: $(this).attr('form_data')
            },
            function($result){
                $('#'+$this.attr('form_div')).html($result);
                //selected_form_div = $this.closest("form");
                selected_form_div = $this.attr('form_div');
                //console.log($result);
            });
            console.log($(this).attr('form_data'));
        });

        $(document).on("click", '.frm_submit_btn', frm_submit_event);

        $('._pay').click(function(){
            var $this = $(this);
            console.log($this.attr('form_id'));
            $('._form_pay').css('display', 'none');
            $('#form_'+$this.attr('form_id')+'_pay').css('display','block');

        });

 });


        function showForms(form,click_listen) {
            jQuery.noConflict();
            jQuery('form').hide();//hide initially
 jQuery("#click_listen").click(function(e){
   jQuery(form).toggle('fast');//or just show instead of toggle

 });

        }

        function reportError(request) { alert("Something Went Wrong, Please Submit A Support Ticket.");} 
    </script> 

and LoadSubSelects is the function in question, and the PHP results:

What I am trying to bind in the results (I think)

the PHP code:

$query="SELECT letter_id,letter_title FROM letter_template where letter_category_id = $catid";
$result = mysql_query ($query) or die(mysql_error());
echo'<select name="sselect1" class="e1" style="width:100% !important; height: 1.85em !important; color: #a8a8a8 !important; border-color:#d7d7d7 ! onChange="loadSubSelects(this.value,\'write_letter\',this.name)"><option value="0">Please Select A Letter</option>';
// printing the list box select command
while($catinfo=mysql_fetch_array($result)){
//Array or records stored in $nt
  echo "<option value=\"".htmlspecialchars($catinfo['letter_id'])."\">".$catinfo['letter_title']."</option>";

}

echo"</select>";
echo htmlspecialchars($catinfo['letter_id']);

Any help would be most appreciated, thanks so much guys :)