Template Issue

/*This is the html for the list and the Template*/
<ul class="list-group padded" id="edit_rate_cost_list">
</ul>
        <template id="supplier_edit_rate_cost_template">
          <div class="row">
            <li class="rate_list" id={{rate_id}}>
              <div class="item">
                <p class="result-title">{{rate_start_date}} - {{rate_end_date}}</p>
                <p>STO: {{sto_rate_cost}}  Rack: {{rack_rate_cost}}</p>
              </div>
              <div class="hide-b-button">
                <!-- Form for editting existing recs -->
                <form id="add_cost_form" role="form">
                  <div class="form-group">
                    <select class="form-control" name="s_line" id="service_line_id_edit" required>
                      <option value="" selected disabled>Service Line</option>
                    </select>
                    <template id="supplier_service_line_template">
                        <option value="{{service_line_id}}">{{service_line_name}}</option>
                    </template>
                    <select class="form-control" name="rate_period" id="rate_period_specific" required>
                      <option value="" selected disabled>Rate Period</option>
                    </select>
                    <template id="supplier_rate_period_template">
                        <option value="{{rate_period_id}}">{{rate_start_date}} - {{rate_end_date}}</option>
                    </template>
                    <select class="form-control" name="b_basis" id="boarding_basis" required>
                      <option value="" selected disabled>Boarding Basis</option>
                    </select>
                      <template id="boarding_basis_template">
                        <option value="{{boarding_basis_id}}">{{boarding_basis_name}}</option>                    
                      </template>
                    <input type="text" class="form-control" placeholder="Type" name="type" required>
                    <input type="number" class="form-control" placeholder="STO Cost" name="sto" required>
                    <input type="number" class="form-control" placeholder="Rack Cost" name="rack" required>
                    <input type="number" class="form-control" placeholder="Child Rate" name="cr" required>
                    <input type="number" class="form-control" placeholder="Single Supplement" name="ss" required>
                    <button id="save_edit_new_rate_cost" data-submiturl="http://46.101.87.122/edit/push_new_rate_cost" rel="add_cost_form" class="btn btn-default save-button">Save</button>
                  </div>
                </form>
                <script>
                $("#add_cost_form").validate();
                </script>
                <!-- end form -->
              </div>
            </li>
      </template>


/*This is my Javascript for loading the list items
I call thesee functions on doc load 
*/
//function to load rate costs
function loadSupplierRateCosts(currid) {

    //cache our DOM
    $rate_costs_list = $('#edit_rate_cost_list');

    //curate post data
    var id = {
        id: currid
    }

    //ayaxing
    $.ajax({
        type: 'POST',
        url: 'edit/get_supp_rate_costs',
        data: id,
        dataType: 'json',
        success: function(ratecostinfo) {
            $rate_costs_list.empty();
            var template = $('#supplier_edit_rate_cost_template').html();
            $.each(ratecostinfo, function(i, curr_ratecost) {
                $rate_costs_list.append(Mustache.render(template, curr_ratecost))
            });
        },
        error: function() {
            console.log('error loading rate cost information');
        }
    });
}

//this is my Java script for loading the selects works on other selects for the same items just not in my list 
//Service Line Select 
function loadSupplierServiceLines(currid) {
    //cache DOM
    $s_list = $('#supplier_edit_service_list');
    $s_select = $('#service_line_id_edit');

    var id = {
        id: currid
    }

    //lets use ajax and get the values
    $.ajax({
        type: 'POST',
        url: 'edit/get_supp_service_lines',
        data: id,
        dataType: 'json',
        success: function(listinfo) {
            $s_list.empty();
            var template = $('#supplier_edit_service_line_template').html();
            var stemplate = $('#supplier_service_line_template').html();
            $.each(listinfo, function(i, currservice) {
                $s_list.append(Mustache.render(template, currservice))
                $s_select.append(Mustache.render(stemplate, currservice))
            });
        },
        error: function() {
            console.log('error loading service line list');
        }
    });
}

//Boarding Basis Select 
function loadBoardingBasis() {
    //cache dom
    $boarding = $('#boarding_basis')

    //call the ajax function to pull from backend
    $.ajax({
        type: 'GET',
        url: 'utils/get_boarding_basis_types',
        data: {
            boarding: "basis"
        },
        dataType: 'json',
        success: function(data) {
            $.each(data, function() {
                $boarding.append(Mustache.render(template, currboardingitem));
            });
        }
    })
}