Count objects in array by property value and display result in HTML

I'm trying to add the count number of modelname and append it to the span element. I first tried to target an ID with length, something like this, but I couldn't get it to work. What's the best way to do this?

var modelCount = document.getElementById('#modelcount');
modelCount.innerHTML = productList.modelname.length;

var productList = [{
  "model": "halvskap",
  "modelname": "Halvskåp",
  "type": "Standard",
  "typename": "Standard",
  "family": "Berlin"
}, {
  "model": "helskap",
  "modelname": "Helskåp",
  "type": "Parskap",
  "typename": "Parskap",
  "family": "Copenhagen"
}, {
  "model": "helskap",
  "modelname": "Helskåp",
  "type": "Parskap",
  "typename": "Parskap",
  "family": "Copenhagen"
}, {
  "model": "smafackskap",
  "modelname": "Småfackskåp",
  "type": "Standard",
  "typename": "Standard",
  "family": "Filippa"
}];

<div class="dropdown">
  <div>
    <input type="radio" name="model" id="halvskap" value="halvskap">
    <label>Halvskåp</label>
    <span></span>
  </div>
  <div>
    <input type="radio" name="model" id="helskap" value="helskap">
    <label>Helskåp</label>
    <span id="modelcount"></span>
  </div>
  <div>
    <input type="radio" name="model" id="smafackskap" value="smafackskap">
    <label>Småfackskåp</label>
    <span></span>
  </div>
  <div>
    <input type="radio" name="model" id="zskap" value="zskap">
    <label>Z-skåp</label>
    <span></span>
  </div>
</div>