Generating select form inputs and options with Jinja macro and jQuery doesn't work

Question

I am trying to generate select form inputs and options. However, it's not working. From what I can see the forward slash to close the html tags for select and option are causing the error. How do I fix this?

{% macro render_select(costs) %}
    {% for cost in costs %}
        <option value='{{ cost.id }}'>{{ cost.age_gender }}</option>
    {% endfor %}
{% endmacro %}

{% set myselect = macros.render_select(costs) %}

<div class="form-group">
<p>Select a family size:</p>

<select name="fam_size" class="fam_size">
    <option value="0" selected>family size</option>
{% for x in range(1,13) %}
    <option value="{{ x }}">{{ x }}</option>
{% endfor %}    
</select>
</div>

<script type="text/javascript">
$('.fam_size').change(function() {
  $('.family').empty();
  $('.mystatus').empty();
  var fam_size = $('.fam_size option:selected').val();
  $('.mystatus').append(fam_size);
    if(fam_size>0) {
      for(i=0;i<fam_size;i++){
          var selector = $('<select>').attr('id', i).html({{myselect}});
          $('.family').append(selector);
          $('.family').append('<br>');
     };
   };
});
</script>
<div class="family"></div>
<div class="mystatus"></div>

I have also tried this variant:

<script type="text/javascript">
$('.fam_size').change(function() {
  $('.family').empty();
  $('.mystatus').empty();
  var fam_size = $('.fam_size option:selected').val();
  var selector = "{{ myselect }}";
  $('.mystatus').append(fam_size);
    if(fam_size>0) {
      for(i=0;i<fam_size;i++){
          $(".family").append("<select>" + selector + "</select>");
     };
   };
});
</script>

Answer 1

Mystery solved - I had invisible characters in my code, it might be a bug in my editor. This stackoverflow question solved it:

No visible cause for "Unexpected token ILLEGAL"