li not being created from this JavaScript

Currently I am working on a project that involves taking an input, get some data, and then display data in a list under the input.

I can receive the string from the input into my controller (c#) but the returned json isn’t being created into a list on the web page.

What I am expecting is after the input is entered and submitted, it will return the results of a query to the page. In the form of a list.

Controller

[HttpPost]
public ActionResult SoftwareNameResults(ReportModel report) {
  list.Add(report);
  return Json(new { name = report.SoftwareName });
}

JS and HTML

function getSoftwareNames() {
  var name = document.getElementById("softwareName").value;
  var stuff = {
    SoftwareName: name
  };
  $.ajax({
    type: "POST",
    url: "@Url.Action("SoftwareNameResults","Report")",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify(stuff),
    success: function(response) {
      document.getElementById("softwareName").value = "";
      document.getElementById("processName").value = "";

      var list = document.getElementById("softwareList");
      var listItem = document.createElement("li");
      listItem.textContent = response.SoftwareName;
      list.appendChild(listItem);;
    },
    failure: function(errMsg) {
      alert(errMsg);
    }
  });
}

@model ProjectName.Web.Models.ReportModel
<div class="row">
  <div class="col-md-12 mt-3">
    <div class="card">
      <h5 class="card-header">Process Report</h5>
      <div class="card-body">
        <div class="row">
          <form>
            <div class="col">

              <label class="card-text" style="display: inline-block;">Software Name (Add-/Remove Programs)</label>
              <input type="text" id="softwareName" class="input-group-sm mb-3" />
              <button type="submit" onclick="getSoftwareNames()">Search</button>

            </div>
            <div class="col">
              <label class="card-text" style="display: inline-block;">Process Name</label>
              <input class="input-group-sm mb-3" />
            </div>
          </form>
        </div>
        <div class="row">
          <div class="col-md-12 col-sm-4">
            <label class="card-body">Software Name Results:</label>
            <ul id="softwareList">

            </ul>

          </div>
          <div class="col-sm-4">
            <label class="card-body">Process Name Results:</label>
            <ul id="processList">

            </ul>

          </div>
        </div>

      </div>
    </div>
  </div>
</div>

I am not very skilled with Javascript, trying to get better but this has me stumped.