Javascript 如何在当前单击的按钮旁边附加用户名？

我有一个表，其中包含3列按钮，按钮名称如下

createQuation1，createQuation2，createQuation3

当用户在弹出窗体显示中单击CreateQuation1时。在createQuestion1旁边追加提交表单userInput值时。当用户单击createQuestion2按钮时，将再次打开相同的弹出窗口，并在createQuestion2旁边追加填写的表单和提交输入字段

html
----
<div ng-controller="MyCtrl">

<table>
    <tr ng-repeat="btn in createQueBtns">
    <td><buton ng-click="showOverlay();" style="background:#3de;padding:0px 2px;;margin:25px;">{{btn.create}}</buton>
    <!-- append dynamic button bellow after submiting form-->
     <div ng-repeat="name in data"><button ng-show="name.length > 0" ng-click='getUserDetails(name)'> {{name}}</button></div>
</div>
    </td>
    </tr>
</table>

<div ng-show="overlay" class="overlay">

  <form>
     <input type="text" nga-model="user.name" />
     <input type="button" ng-click="sayName(user.name);" value="sayName"/>
  </form>
</div>

script
-----
var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
//collection data
$scope.data = [];
$scope.sayName = function(data){
$scope.data.push(data);
};
// get the data
$scope.getUserDetails = function(data){
alert(data)
};
//creating buttons
$scope.createQueBtns = [
 { "create":"createQueBtn1"},
  {"create":"createQueBtn2"},
   {"create":"createQueBtn3"}
];
$scope.showOverlay = function(){
$scope.overlay = true;
}
}

css
---
.liked {
  color: green;
}
.overlay{
  box-shadow:1px 1px 10px 10px #cd4;
  padding:10px;
  magin:10px;
}
.disliked {
  color: red;
}
table tr td{
border:1px solid #ccc;padding:5px;margin:5px;
}

html
----
{{btn.create}
{{name}}
剧本
-----
var myApp=angular.module（'myApp'，[]）；
函数MyCtrl（$scope）{
//收集数据
$scope.data=[]；
$scope.sayName=函数（数据）{
$scope.data.push（数据）；
};
//获取数据
$scope.getUserDetails=函数（数据）{
警报（数据）
};
//创建按钮
$scope.createQueBtns=[
{“create”：“createQueBtn1”}，
{“create”：“createQueBtn2”}，
{“create”：“createQueBtn3”}
];
$scope.showOverlay=函数（）{
$scope.overlay=true；
}
}
css
---
.喜欢{
颜色：绿色；
}
.覆盖{
盒影：1px10px 10px 10px#cd4；
填充：10px；
magin:10px；
}
.不喜欢{
颜色：红色；
}
表tr td{
边框：1px实心#ccc；填充：5px；边距：5px；
}

我在JSFIDLE中添加了代码：

请参见

html:

---

问题是，存储数据的方式无法帮助您引用单击的特定按钮

如果用户根据重拨按钮值表列单击单选按钮，我将更新JSFIDLE显示我该怎么做请帮助我请帮助我GabrielCheung@geethatek我不太确定你想要什么。你能解释一下细节吗？

<table>
    <tr ng-repeat="btn in createQueBtns">
    <!-- [[[changes here]]]-->
    <td><buton ng-click="showOverlay(btn.create);" style="background:#3de;padding:0px 2px;;margin:25px;">{{btn.create}}</buton>
    <!-- append dynamic button bellow after submiting form-->
    <!-- [[[changes here]]]-->
     <div ng-repeat="name in data[btn.create]"><button ng-show="name.length > 0" ng-click='getUserDetails(name)'> {{name}}</button></div>
</div>
    </td>
    </tr>
</table>

<div ng-show="overlay" class="overlay">

  <form>
     <input type="text" ng-model="user.name" />
     <input type="button" ng-click="sayName(user.name);" value="sayName"/>
  </form>
</div>

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
//collection data
// [[[changes here]]]
$scope.data = {};
$scope.sayName = function(data){
// [[[changes here]]]
$scope.data[$scope.selected] = $scope.data[$scope.selected] || [];
$scope.data[$scope.selected].push(data);
};
// get the data
$scope.getUserDetails = function(data){
alert(data)
};
//creating buttons
$scope.createQueBtns = [
 { "create":"createQueBtn1"},
  {"create":"createQueBtn2"},
   {"create":"createQueBtn3"}
];
$scope.showOverlay = function(btn){
// [[[changes here]]]
$scope.selected = btn;
$scope.overlay = true;
}
}