在Laravel中使用javascript创建控件

我目前在Laravel的一个项目中工作，我必须为不同的疾病创建单选按钮来指定是/否答案。这里我从数据库中获取疾病名称，该数据库是从控制器传递的

我创建了一个php数组，只是为了得到疾病的名称

<?php $value=array();?>
@foreach($list as $disease)
<?php 
  $value[]=$disease->diseaseName; 
?>
@endforeach

diseaseList.blade.php

这是我的设计观点。在这种情况下，当单击按钮时，必须创建带有疾病名称的新单选按钮

<div class="form-group">
<label>Patient ID &nbsp &nbsp &nbsp &nbsp<b style="font-size: 18px;">{{$id}} 
</b></label>
</div>
<input type="hidden" name="patient_id" value="{{$id}}">
<div class="form-group">
<label>Patient Name &nbsp<b style="font-size: 18px;">{{$name}}</b></label>
</div>
<input type="hidden" name="patient_name" value="{{$name}}">
<div class="field_wrapper">
<div>
<a href="javascript:void(0);" class="add_button" title="Add field">&nbsp<img 
style="padding-bottom: 15px;" src="../../images/add_btn.png"></a>
</div>
</div>

下面是创建单选按钮的javascript

<script type="text/javascript">
$(document).ready(function(){
var values = new Array();
<?php foreach($value as $key => $val){ ?>
    values.push('<?php echo $val; ?>');
<?php } ?>

var maxField = values.length; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var x = 0; //Initial field counter is 1


var fieldHTML = '<div class="field_wrapper"><div class="label-group"><div 
class="line"></div><label style="font-weight: 900;" 
id="labelid">Disease</label></div><div class="form-check form-check-inline"> 
<input class="form-check-input" type="radio" name="Diabetes" 
id="inlineRadio1" value="Yes">&nbsp<label class="form-check-label" 
for="inlineRadio1">Yes</label></div><div class="form-check form-check- 
inline"><input class="form-check-input" type="radio" name="Diabetes" 
id="inlineRadio2" value="No">&nbsp<label class="form-check-label" 
for="inlineRadio2">No</label></div><div class="line"></div><div class="form- 
group" name="dName" value="dName"><input type="text" name="dName" id="dName" 
hidden size="5"><label name="dlabel" id="dlabel" hidden> mg/hg</label></div> 
</div>'; 

//Once add button is clicked
$(addButton).click(function(){
    //Check maximum number of input fields
    if(x < maxField){ 
         var element=values[x];
         $(wrapper).append(fieldHTML); //Add field html
         document.getElementById("labelid").innerText = element;
         x++; //Increment field counter
    }
});
});

一切正常。问题是，当我第一次单击该按钮时，名为Diabetes的单选按钮已成功创建；当我第二次按下该按钮时，先前创建的单选按钮Diabetes将重命名为Diseasedefault name，并且已创建名为Hightension的第二种疾病的新控件

---

创建所有单选按钮时重复此操作。请给我一个解决方案。提前感谢。

我必须更改HTML结构：

<div class="field_wrapper"></div>
<div>
    <a href="javascript:void(0);" class="add_button" title="Add field">&nbsp<img style="padding-bottom: 15px;" src="../../images/add_btn.png"></a>
</div>

致：

---

这是代码笔的链接：

很高兴能帮忙！：

$(wrapper).append(fieldHTML); //Add field html

$(wrapper).prepend(fieldHTML); //Add field html