JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myModal" class="modal fade">
			<div class="modal-dialog boc">
				<div class="modal-content">				

					<div class="modal-body">
						<form class="form-horizontal" >
							<fieldset>				
							<div class="control-group">
								<label class="control-label" for="prependedtext-2"></label>
								<div class="controls">
									<div class="input-prepend">
										<span class="add-on">Услуга</span>
										<input id="prependedtext-2" name="prependedtext-2" class="input-xlarge" placeholder="" required="" type="text">
									</div>
								</div>
							</div>	
              </fieldset>
						</form>
					</div>				
				</div>
			</div>
		</div>   
    
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 item">
      <div class="grid_wrap">
      <div class="name">Услуга1</div>
      <button data-target="#myModal" type="button" class="extremum-click" data-toggle="modal">Заголовок</button>
      </div>
    </div>
    
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 item">
      <div class="grid_wrap">
      <div class="name">Услуга2</div>
      <button data-target="#myModal" type="button" class="extremum-click" data-toggle="modal">Заголовок</button>
      </div>
    </div>

JavaScript

$(".extremum-click").click(function () {
      document.querySelector('.input-xlarge').value = document.querySelector('.name').innerText;
    });