Problème d'addition dynamique avec manque d'espace entre les éléments

Question

J'ai le modèle suivant dans mon balisage. Ensuite, je l'insère dans mon DOM comme ceci. //Avant la cible spécifiée

P粉384244473 · Answer

Utilisez flexbox pour réduire tous les espaces et ajouter des espaces.

#btn-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em;
}

function addSequenced(railcar, $target) {
    var $clone = $($('#unsequenced-template').html());
    $clone.attr('data-id', railcar.id);
    $clone.text(railcar.number);
    $clone.insertBefore($target);
    modified = true;
}

let num = 4;
$("#add-btn").on("click", function(e) {
  addSequenced({
    id: num,
    number: num,
  }, $(this));
  num++;
});

#btn-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em;
}