Getting car brands name data from a JSON database in a select tag with options issue

So I have troubles getting car brands name data from a JSON database in a select tag with options

This is my function:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
    function request()
    {
        adress="http://localhost:4000/brands?callback=?"
        $.getJSON(adress, function(answer)
        {
            $.each(answer, function(index, brands)
            {
                contentToDisplay ='<option>"'+brands.name+'"</option>'
                $(contentToDisplay).appendTo(document.getElementById(brandName))
            }
            )
        }
        )
    }
    
    </script>

This is my select tag:

<label for="brandName" class="label">Brand</label>
                        <select id="brandName" class="select" name="brandName" onclick="request()" required>
                            <option value="" hidden="true">Choose the option</option>

This is the JSON database:

[
  {
    "id": 1,
    "name": "Audi"
  },
  {
    "id": 2,
    "name": "BMW"
  }
]

I don't know what I am doing wrong. Please help.

According to Option, the constructor creates a new HTMLOptionElement.

var o = new Option(brands.name, brands.id);
$(o).html(brands.name);
$("#brandName").append(o);