HTMLの入力フォームをJavaScriptで自動生成

簡単な構造計算ができるwebアプリを開発している途中に解決が難しい問題に当たってしまったので、お力添えいただけると嬉しいです。

現在私は入力フォームの実装について解決方法を探しています。
具体的に例を挙げて説明しますと、
ユーザーはそれぞれ1~10個のりんごを持っています。
リンゴはそれぞれ
・重量
・体積
・糖度
という3つの要素を持ちます。
ユーザーには持っている全てのリンゴが持つ3つの要素を入力して貰います。

この際、入力フォームは
・重量
・体積
・糖度
の3つを1セットとし、ユーザーが持っているリンゴの数だけこのセットをJavaScriptによって自動生成したいのです。

まとめると、
ユーザーにリンゴの数を入力してもらう
→入力されたリンゴの数だけ3つの要素を入力するフォームをJavaScriptによって自動生成する

という機能を実装したいのですが、私の知識だけでは手詰まりの状況です。
どうかお力添えをお願いいたします。
長文失礼致しました。

追記
ご指摘通り、たしかに具体的な内容が足りてませんでした。失礼致しました。

さて具体的な内容ですが、
①入力されたリンゴの数を取得
↓
②JavaScriptでリンゴの数を変数に代入
↓
③入力された数だけ定形フォームを複製
↓
④複製したフォームを表示
の流れのうち、②→③の手順
つまりJavaScriptの繰り返し処理によって各々に別のidを与えながらHTML上に入力した数だけフォームを作成する方法をお聞きしたかった次第です。
もしこれも「全部教えて」に該当するとご判断される場合は、ヒントだけでも構いませんので教えていただけると嬉しいです。

gentaro

2020/07/18 16:29

「手詰まり」は構わないんですが、どこで手詰まりになったのか、もっと具体的な情報を書きましょう。「全部教えて」はナシです。それはスクールに通うなり教材買うなりして学習しましょう。

dencyu

2020/07/18 17:08 編集

ご返信ありがとうございます。ご指摘たしかに具体的な内容が足りてませんでした。失礼致しました。さて具体的な内容ですが、 ①入力されたリンゴの数を取得 ↓ ②JavaScriptでリンゴの数を変数に代入 ↓ ③入力された数だけ定形フォームを複製 ↓ ④複製したフォームを表示の流れのうち、②→③の手順つまりJavaScriptの繰り返し処理によって各々に別のidを与えながらHTML上に入力した数だけフォームを作成する方法をお聞きしたかった次第です。もしこれも「全部教えて」に該当するとご判断される場合は、ヒントだけでも構いませんので教えていただけると嬉しいです。

gentaro

2020/07/18 17:01

ここは「質問への追記・修正」を依頼する欄なので、質問文を修正してその内容を記載して下さい。また、途中まで作成されたコードがあるなら、それを提示すれば回答が得られやすくなります。質問文にコードを記載する場合は https://teratail.com/help/question-tips#questionTips3-3-1 https://teratail.com/help/question-tips#questionTips3-7 この辺を参考にして下さい。

m.ts10806

2020/07/18 21:59

まずは自分で思うように書いてみるところから

gentaro

2020/07/19 02:27

「コードを提示すれば回答が得られやすくなります」と書いたのは、あなたが現状でJavaScriptからHTMLを操作する方法をどの程度理解できているのか（理解できていない文法や構文等が具体的に何なのか）がわからないから、どこからどの程度説明すれば良いのか、回答者が迷うからです。この質問に回答しようとすると、ほぼ１から回答者が模範解答を作成する必要があり、それは「丸投げの作業依頼」に近いものになってしまいます。未完成でも良いので、ここまで作成したコードを提示した方が良いです。