How can I fill the inside of a SVG?

I am trying to fill a heart shape SVG on click using html, css and javascript, but it doesn’t seem to work.
Here is the svg code :

<svg class="heartRecipe" id="heart${index}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M 15 7 C 7.832031 7 2 12.832031 2 20 C 2 34.761719 18.695313 42.046875 24.375 46.78125 L 25 47.3125 L 25.625 46.78125 C 31.304688 42.046875 48 34.761719 48 20 C 48 12.832031 42.167969 7 35 7 C 30.945313 7 27.382813 8.925781 25 11.84375 C 22.617188 8.925781 19.054688 7 15 7 Z M 15 9 C 18.835938 9 22.1875 10.96875 24.15625 13.9375 L 25 15.1875 L 25.84375 13.9375 C 27.8125 10.96875 31.164063 9 35 9 C 41.085938 9 46 13.914063 46 20 C 46 32.898438 31.59375 39.574219 25 44.78125 C 18.40625 39.574219 4 32.898438 4 20 C 4 13.914063 8.914063 9 15 9 Z"></path></svg>

I have tried multiple solutions, such as using “fill” in CSS which only fills the stroke around the svg, but also removing everything in the path from the second M which only gives me an error when trying to fill it.

Is there anyway I could fill the inside of this svg ?

Here is the javascript code, and the css code.

$(`.heartRecipe`).on("click", (e) => {
  var heartId = e.target.id;
  $(`#${heartId}`).toggleClass("heartAnim")
})

.heartAnim {
  fill: #E74A70;
}

<svg class="heartRecipe" id="heart${index}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M 15 7 C 7.832031 7 2 12.832031 2 20 C 2 34.761719 18.695313 42.046875 24.375 46.78125 L 25 47.3125 L 25.625 46.78125 C 31.304688 42.046875 48 34.761719 48 20 C 48 12.832031 42.167969 7 35 7 C 30.945313 7 27.382813 8.925781 25 11.84375 C 22.617188 8.925781 19.054688 7 15 7 Z M 15 9 C 18.835938 9 22.1875 10.96875 24.15625 13.9375 L 25 15.1875 L 25.84375 13.9375 C 27.8125 10.96875 31.164063 9 35 9 C 41.085938 9 46 13.914063 46 20 C 46 32.898438 31.59375 39.574219 25 44.78125 C 18.40625 39.574219 4 32.898438 4 20 C 4 13.914063 8.914063 9 15 9 Z"></path></svg>

Answer

You could always truncate the shape onclick so that its inside isn’t the boundary between the outer and inner heart shape e.g.

$(`.heartRecipe`).on("click", (e) => {
  e.target.setAttribute("d", e.target.getAttribute("d").split("Z")[0]);
  $(e.target).toggleClass("heartAnim")
})

.heartAnim {
  fill: #E74A70;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg class="heartRecipe" id="heart${index}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M 15 7 C 7.832031 7 2 12.832031 2 20 C 2 34.761719 18.695313 42.046875 24.375 46.78125 L 25 47.3125 L 25.625 46.78125 C 31.304688 42.046875 48 34.761719 48 20 C 48 12.832031 42.167969 7 35 7 C 30.945313 7 27.382813 8.925781 25 11.84375 C 22.617188 8.925781 19.054688 7 15 7 Z M 15 9 C 18.835938 9 22.1875 10.96875 24.15625 13.9375 L 25 15.1875 L 25.84375 13.9375 C 27.8125 10.96875 31.164063 9 35 9 C 41.085938 9 46 13.914063 46 20 C 46 32.898438 31.59375 39.574219 25 44.78125 C 18.40625 39.574219 4 32.898438 4 20 C 4 13.914063 8.914063 9 15 9 Z"></path></svg>