Allow clozes on the second card type

Anki Suggestions
1

I am making a language learning deck that looks something like

lemma: good
example_1: We had a {{c1::good}} time.
example_2: The lunch was very {{c1::good}}.
example_3: The documents are {{c1::good}} to go.
example_4: You did a {{c1::good}} job.

(But in another language. Unrelated supplementary fields are skipped here.)

Some cards might have multiple {{c1::...}} if the word appears multiple times, but there are no {{c2::...}} and onwards.

Here is the minimal card HTML of what I attempted to achieve:

Card Type 1 Front:

<h1>{{lemma}}</h1>

Card Type 1 Back:

<h1>{{lemma}}</h1>
<ul>
  <li>{{cloze:example_1}}</li>
  <li>{{cloze:example_2}}</li>
</ul>

Card Type 2 Front:

<ul>
  <li>{{cloze:example_3}}</li>
  <li>{{cloze:example_4}}</li>
</ul>
<details>
  <summary>Hints (sentences previously appeared)</summary>
  <ul>
    <li>{{cloze:example_1}}</li>
    <li>{{cloze:example_2}}</li>
  </ul>
</details>

Card Type 2 Back:

<h1>{{lemma}}</h1>
<ul>
  <li>{{cloze:example_1}}</li>
  <li>{{cloze:example_2}}</li>
  <li>{{cloze:example_3}}</li>
  <li>{{cloze:example_4}}</li>
</ul>

But I only realized the second card type is broken after adding both.

Supporting this feature will definitely facilitate language learning by allowing vocabulary recognition and production simultaneously.

Current Workaround

Card Type 1 works and requires no modification.

Card Type 2 Front:

<ul>
  <li class="field-with-cloze">{{example_3}}</li>
  <li class="field-with-cloze">{{example_4}}</li>
</ul>
<details>
  <summary>Hints (sentences previously appeared)</summary>
  <ul>
    <li class="field-with-cloze">{{example_1}}</li>
    <li class="field-with-cloze">{{example_2}}</li>
  </ul>
</details>

<script>
for (const element of document.getElementsByClassName("field-with-cloze")) element.innerHTML = element.textContent.replaceAll("{" + "{c1::", '<span class="cloze" data-cloze="').replaceAll("}}", '" data-ordinal="1">[...]</span>');
</script>

Card Type 2 Back:

<h1>{{lemma}}</h1>
<ul>
  <li class="field-with-cloze">{{example_1}}</li>
  <li class="field-with-cloze">{{example_2}}</li>
  <li class="field-with-cloze">{{example_3}}</li>
  <li class="field-with-cloze">{{example_4}}</li>
</ul>

<script>
// Fix broken Anki clozes on the second card type (back)
for (const element of document.getElementsByClassName("field-with-cloze")) element.innerHTML = element.textContent.replaceAll("{" + "{c1::", '<span class="cloze" data-ordinal="1">').replaceAll("}}", "</span>");
</script>

But I hate adding JavaScript when things can be static.

2

You can wrap text with some HTML element and use CSS to style it like a cloze.

For example:

Field:

We had a <b>good</b> time.

Front template:

<div class=front>{{Field}}</div>

Back template:

<div class=back>{{Field}}</div>

CSS:

.front b { font-size: 0px; }
.front b:after {
  content: "[...]";
  color: lightblue;
  font-size: 20px;
}
.back b { color: lightblue; }