كيف يمكنني جعل زر 'show' يعرض العنصر المرتبط به بدلاً من العنصر الأول في كل عنصر داخل حلقة الـ for

المشكلة تكمن في أنك تستخدم نفس الهوية (id) "myForm" لجميع العناصر في الحلقة for داخل الدالة AllNames().

أي أن جميع الأزرار "show" تشير إلى نفس العنصر myForm، وبالتالي عليك جعل كل زر "show" يفتح العنصر المرتبط به، من خلال تمرير معرف فريد لكل عنصر، كالتالي:

<script>
      const arrays = [
        { id: 123, name: 'yasser', age: 33, job: 'engenner' },
        { id: 643, name: 'bakkar', age: 12, job: 'devloper' },
        { id: 908, name: 'hamed', age: 21, job: 'backEnd' },
        { id: 435, name: 'Umar', age: 32, job: 'fronEnd' },
        { id: 254, name: 'saber', age: 15, job: 'master' },
        { id: 765, name: 'iman', age: 11, job: 'secrit' },
      ];

      const AllNames = () => {
        for (array of arrays) {
          let content = `
                <div class="card">
                    <h1>name: ${array.name}</h1>
                    <h3>age: ${array.age}</h3>
                    <h3>job: ${array.job}</h3>
                    <div class="myForm" id= myForm-${array.id} style="display:none">
                        <input type="text" />
                        <button class="Edit" onclick="handle()">Edit</button>
                    </div>
                    <button class="show" onclick="showForm(${array.id})">show</button>
                </div>`;
          document.getElementById('divAll').innerHTML += content;
        }
      };

      const handle = () => {
        console.log(this.array);
      };

      const showForm = id => {
        document.getElementById(`myForm-${id}`).style.display = 'block';
      };

      AllNames();
    </script>

بتاريخ 13 دقائق مضت قال Mustafa Suleiman:

المشكلة تكمن في أنك تستخدم نفس الهوية (id) "myForm" لجميع العناصر في الحلقة for داخل الدالة AllNames().

أي أن جميع الأزرار "show" تشير إلى نفس العنصر myForm، وبالتالي عليك جعل كل زر "show" يفتح العنصر المرتبط به، من خلال تمرير معرف فريد لكل عنصر، كالتالي:

<script>
      const arrays = [
        { id: 123, name: 'yasser', age: 33, job: 'engenner' },
        { id: 643, name: 'bakkar', age: 12, job: 'devloper' },
        { id: 908, name: 'hamed', age: 21, job: 'backEnd' },
        { id: 435, name: 'Umar', age: 32, job: 'fronEnd' },
        { id: 254, name: 'saber', age: 15, job: 'master' },
        { id: 765, name: 'iman', age: 11, job: 'secrit' },
      ];

      const AllNames = () => {
        for (array of arrays) {
          let content = `
                <div class="card">
                    <h1>name: ${array.name}</h1>
                    <h3>age: ${array.age}</h3>
                    <h3>job: ${array.job}</h3>
                    <div class="myForm" id= myForm-${array.id} style="display:none">
                        <input type="text" />
                        <button class="Edit" onclick="handle()">Edit</button>
                    </div>
                    <button class="show" onclick="showForm(${array.id})">show</button>
                </div>`;
          document.getElementById('divAll').innerHTML += content;
        }
      };

      const handle = () => {
        console.log(this.array);
      };

      const showForm = id => {
        document.getElementById(`myForm-${id}`).style.display = 'block';
      };

      AllNames();
    </script>

 

جزاك الله

عليك أن تمر على عناصر المصفوفة كلها، ومن ثم اضافة عنصر html يحوي محتوى كل عنصر على حدا.
يمكنك تطبيق ذلك بواسطة التابع map او forEach المقدمين في EcmaScript 2016، وهي بمثابة تحديث او اضافات للغة JavaScript.
تستطيع استخدام التوابع المقدمة من ES6 مباشرة بدون أي خطوات اضافية، وهذا هو الحل لمشكلتك باستخدام التابع map.

const arrays = [
        { id: 123, name: 'yasser', age: 33, job: 'engenner' },
        { id: 643, name: 'bakkar', age: 12, job: 'devloper' },
        { id: 908, name: 'hamed', age: 21, job: 'backEnd' },
        { id: 435, name: 'Umar', age: 32, job: 'fronEnd' },
        { id: 254, name: 'saber', age: 15, job: 'master' },
        { id: 765, name: 'iman', age: 11, job: 'secrit' },
];

let elements = '';

arrays.map(array => {
	elements += `<div>
		${array.id}...
	</div>`
})

هذا هو الحل الأسهل لمشكلة عرض ال id الخاص بكل عنصر بالمصفوفة، حيث array هنا هو كل عنصر على حدا، والسهم هو اختصار لل function بلغة JS.